{"id":163,"date":"2022-03-26T17:43:08","date_gmt":"2022-03-26T17:43:08","guid":{"rendered":"https:\/\/priyodesign.com\/docs\/?post_type=docs&p=163"},"modified":"2023-03-06T17:57:47","modified_gmt":"2023-03-06T17:57:47","slug":"google-maps-setup","status":"publish","type":"docs","link":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/read\/google-maps-setup\/","title":{"rendered":"Google Maps Setup"},"content":{"rendered":"\n

To use the Google Maps service in the template, you need to obtain a personal API Key from Google Cloud<\/a>. Google now requires a credit card to use map API Keys. After obtaining a valid API key follow the next steps to setup the map.<\/p>\n\n\n\n

\n

\u26a0\ufe0f Demo API Key will not work on your website!<\/h4>\n\n\n\n

The API key used in the live demo will NOT work on your website! If you want to use Google Maps on your website, you need to get the API key first.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n

\"Tick Step 1<\/h4>\n\n\n\n
<\/div>\n\n\n\n

You need to edit every HTML template in a code editor. After opening the HTML template go to the bottom of the page where JS scripts are called. See the code below:<\/p>\n\n\n\n

<\/div>\n\n\n\n
<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=PASTE_YOUR_API_KEY_HERE\"><\/script><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\"Tick Step 2<\/h4>\n\n\n\n
    \n
  1. To make your own Location, Zoom Level, Marker, and Company Title you need to open the main.js<\/code> file in a code editor. The main.js file is located at ‘nijhum-template\/assets\/js\/<\/code>‘.<\/li>\n\n\n\n
  2. You can find your location Latitude and Longitude here<\/a> by entering a place name.<\/li>\n\n\n\n
  3. After getting the LatLong numbers just replace them to nijhum-template main.js<\/code> file by opening it in a code editor.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n
    \/\/ 19. Google Map\n  function basicmap() {\n    let mapOptions = {\n      zoom: 13,\n      scrollwheel: false,\n      center: new google.maps.LatLng(40.712776, -74.005974), \/\/ New York\n      \/\/ This is where you would paste any style found on Snazzy Maps.\n      ...\n      \/\/ End styles\n    };\n    let mapElement = document.getElementById(\"map\");\n    let map = new google.maps.Map(mapElement, mapOptions);\n    let marker = new google.maps.Marker({\n      position: new google.maps.LatLng(40.712776, -74.005974),\n      map: map,\n      title: \"Nijhum\",\n      icon: \"...png\",\n    });\n  }<\/code><\/pre>\n\n\n\n
    \n
    \u2139\ufe0f Change Map Styles?<\/strong><\/h4>\n\n\n\n
    You can generate and preview custom map styles from\u00a0Snazzy Maps<\/a>\u00a0free online service. Then just replace the styles in the main.js<\/code> Google Map styles.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
    To use the Google Maps service in the template, you need to obtain a personal API Key from Google Cloud. Google now requires a credit card to use map API Keys. After obtaining a valid API key follow the next steps to setup the map. \u26a0\ufe0f Demo API Key will not work on your website! The […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[14],"doc_tag":[],"class_list":["post-163","docs","type-docs","status-publish","hentry","doc_category-basic-setup"],"_links":{"self":[{"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/docs\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":31,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/docs\/163\/revisions"}],"predecessor-version":[{"id":770,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/docs\/163\/revisions\/770"}],"wp:attachment":[{"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/doc_category?post=163"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/doc_tag?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}