{"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-06T21:14:34","modified_gmt":"2023-03-06T21:14:34","slug":"google-maps-setup","status":"publish","type":"docs","link":"https:\/\/priyodesign.com\/docs\/mou-html\/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<\/mark> Key from\u00a0Google Cloud<\/a>. Google now requires a credit card to use map API Keys. After obtaining a valid API key follow the next steps to set up 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<\/code> file is located at ‘mou-template\/assets\/js\/<\/mark>‘.<\/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<\/mark> numbers just replace them to mou-template<\/mark> main.js<\/code> file by opening it in a code editor.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n
      \/\/ 33. Google Map\n  function basicmap() {\n      var mapOptions = {\n          zoom: 14, \/\/ You can change this\n          scrollwheel: false, \/\/ You can make it true or false\n          center: new google.maps.LatLng(-37.813629, 144.963058), \/\/ Replace these numbers to yours\n          ...\n          var mapElement = document.getElementById(\"map\");\n          var map = new google.maps.Map(mapElement, mapOptions);\n          var marker = new google.maps.Marker({\n              position: new google.maps.LatLng(-37.813629, 144.963058), \/\/ Again, replace these numbers to yours\n              map: map,\n              title: \"M O U\", \/\/ Give your own company Title inside of double quote\n              icon: \"https:\/\/res.cloudinary.com\/camicrouser\/image\/upload\/v1643792892\/Marker-MOU.png\",\n              \/\/ You can use a custom .png marker. Just replace the url of Marker\n          });\n      }<\/code><\/pre>\n\n\n\n
    \n
    \u2728 <\/strong>Change Map Styles?<\/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 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\u00a0Google Cloud. Google now requires a credit card to use map API Keys. After obtaining a valid API key follow the next steps to set up the map. \u26a0\ufe0f Demo API Key will not work on your website! […]<\/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\/wp-json\/wp\/v2\/docs\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/priyodesign.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/priyodesign.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":30,"href":"https:\/\/priyodesign.com\/docs\/wp-json\/wp\/v2\/docs\/163\/revisions"}],"predecessor-version":[{"id":652,"href":"https:\/\/priyodesign.com\/docs\/wp-json\/wp\/v2\/docs\/163\/revisions\/652"}],"wp:attachment":[{"href":"https:\/\/priyodesign.com\/docs\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/wp-json\/wp\/v2\/doc_category?post=163"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}