Google Maps Setup

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 set up the map.

Step 1

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:

<script src="https://maps.googleapis.com/maps/api/js?key=PASTE_YOUR_API_KEY_HERE"></script>

Step 2

1. To make your own Location, Zoom Level, Marker, and Company Title you need to open the main.js file in a code editor. The main.js file is located at ‘mou-template/assets/js/‘.
2. You can find your location Latitude and Longitude here by entering a place name.
3. After getting the LatLong numbers just replace them to mou-template main.js file by opening it in a code editor.

  // 33. Google Map
  function basicmap() {
      var mapOptions = {
          zoom: 14, // You can change this
          scrollwheel: false, // You can make it true or false
          center: new google.maps.LatLng(-37.813629, 144.963058), // Replace these numbers to yours
          ...
          var mapElement = document.getElementById("map");
          var map = new google.maps.Map(mapElement, mapOptions);
          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(-37.813629, 144.963058), // Again, replace these numbers to yours
              map: map,
              title: "M O U", // Give your own company Title inside of double quote
              icon: "https://res.cloudinary.com/camicrouser/image/upload/v1643792892/Marker-MOU.png",
              // You can use a custom .png marker. Just replace the url of Marker
          });
      }