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).

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);

   

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:

   

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: