If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to add a marker to Google map

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