Categories

Featured templates

JS Animated. How to add a marker to Google map

Ray Taylor May 27, 2015
Rating: 5.0/5. From 1 vote.
Please wait...

In this tutorial you will learn how to add a marker on Google Map in website template(s).

JS Animated. How to add a marker to Google map
  1. Open scripts.js file using any text editor and make sure that you’ve specified correct coordinates. For example: new google.maps.LatLng(parseFloat(40.646197), parseFloat(-73.9724068, 14)),

  2. Once you’ve varified the coordinates, find the following script in .html file:

    (function ($) { 
          var o = document.getElementById("google-map"); 
          if (o) { 
              include('//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'); 
       
              $(document).ready(function () { 
                  var mapOptions = { 
                      zoom: 17, 
                      center: new google.maps.LatLng(parseFloat(40.8469344), parseFloat(-74.1112596, 19)), 
                      scrollwheel: false 
                  } 
                  new google.maps.Map(o, mapOptions); 
              }); 
          } 
      })(jQuery);
    check_mark
  3. Add the following piece of code just after this line – new google.maps.Map(o, mapOptions);:

    var map = new google.maps.Map(document.getElementById("google-map"), mapOptions); 
                      var marker = new google.maps.Marker({ 
                      position: new google.maps.LatLng(parseFloat(40.8469344), parseFloat(-74.1112596, 19)), 
                      map: map, 
                      title: 'Hello Word!' 
                      }); 
                      // To add the marker to the map, call setMap(); 
                      marker.setMap(map);
  4. Finally, you should have the following code:

    (function ($) { 
        var o = document.getElementById("google-map"); 
        if (o) { 
        include('//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'); 
         
        $(document).ready(function () { 
        var mapOptions = { 
        zoom: 17, 
        center: new google.maps.LatLng(parseFloat(40.646197), parseFloat(-73.9724068, 14)), 
        scrollwheel: false 
        } 
        new google.maps.Map(o, mapOptions); 
        var map = new google.maps.Map(document.getElementById("google-map"), mapOptions); 
        var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(parseFloat(40.646197), parseFloat(-73.9724068, 14)), 
        map: map, 
        title: 'Hello Word!' 
        }); 
        marker.setMap(map); 
        }); 
        } 
        })(jQuery);
      
  5. Save the file and upload to the server replacing the original one:

    check_mark-1

Thank you for reading this tutorial. Now you know how to add a marker on Google Map in website template(s).

Feel free to check the detailed video tutorial below:

JS Animated. How to add a marker to Google map
This entry was posted in JS Animated tutorials and tagged google, HTML, map, marker. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket