Add Google Map with multiple markers to your website

  •  
  •  
  •  
  •  
  •  
  •  

This tutorial, will help you to integrate or add Google Map with multiple markers to your website. You can also visit the following link, if you want to add Google Map with a single marker to your website. We will use Google Maps API for displaying the Google Map with your desired locations.

Add google map with multiple markers to your website

HTML code — Add Google Map with multiple markers

It’s a simple HTML code.  The Google Map will be visible within the below-mentioned div.

<div id="google_map"></div>

The first things you will need is the latitude and longitude of the desired locations. You can easily get those locations from the Google Map website. Type your search location and enter. Then mark the exact location. A marker will appear and display your latitude and longitude coordinates.

JavaScript code

function initiateGoogleMap() {
  	  
    //Some properties we want to pass to the map  
    var options = {  
       mapTypeId: google.maps.MapTypeId.ROADMAP //Other map types are -- SATELLITE/HYBRID/TERRAIN
    }; 
    
 
      //Initializing the map  
      var map = new google.maps.Map(document.getElementById('google_map'), options);  
  
    
      //Multiple Markers
      var markers = [
          ['CAD-CAM Robotics Lab, Mechanical Engineering Department', 22.318861, 87.312747],
          ['Technology Guest House', 22.315967, 87.303832],
          ['Visveswaraya Guest House', 22.314685, 87.305177],
          ['G S Sanyal School of Telecommunications(GSST)', 22.317067, 87.312221],
          ['Technology Market', 22.314625, 87.300049],
          ['Central Research Facility', 22.320527, 87.313855],
          ['Naval Architecture Department', 22.320745, 87.314929],
          ['Central Library', 22.320189, 87.309660],
          ['School of Medical Science & Technology', 22.315848, 87.310758],
          ['Mining Department', 22.321509, 87.311274]
      ];
    
  
      //Info Contents
      var infoContent = [
          ["CAD-CAM Robotics Lab", "CAD-CAM Robotics Lab, Mechanical Engineering Department, Indian Institute of Technology Kharagpur, India"],
          ["Technology Guest House", "Technology Guest House, Indian Institute of Technology Kharagpur, India"],
          ["Visveswaraya Guest House", "Visveswaraya Guest House, Indian Institute of Technology Kharagpur, India"],
          ["G S Sanyal School of Telecommunications(GSST)", "G S Sanyal School of Telecommunications(GSST), Indian Institute of Technology Kharagpur, India"],
          ["Technology Market", "Technology Market, Indian Institute of Technology Kharagpur, India"],
          ["Central Research Facility", "Central Research Facility, Indian Institute of Technology Kharagpur, India"],
          ["Naval Architecture Department", "Naval Architecture Department, Indian Institute of Technology Kharagpur, India"],
          ["Central Library", "Central Library, Indian Institute of Technology Kharagpur, India"],
          ["School of Medical Science & Technology", "School of Medical Science & Technology, Indian Institute of Technology Kharagpur, India"],
          ["Mining Department", "Mining Department, Indian Institute of Technology Kharagpur, India"],
      ];
  
    
    
    var bounds = new google.maps.LatLngBounds();
    //Create an object of InfoWindow class
    var infoWindow = new google.maps.InfoWindow();
    var marker, i;
    
    // Loop through markers array and place each marker on the map  
    for(i=0; i<markers.length; i++) {
        var marker_position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(marker_position);
        marker = new google.maps.Marker({
            position: marker_position,
            map: map,
            title: markers[i][0]
        });
        
        //Assign each marker an info window, which will display in click event  
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent('<strong>'+infoContents[i][0]+'</strong><br/><br/>'+infoContents[i][1]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        //Automatically center the map, so that all markers fit on the screen
        map.fitBounds(bounds);
    }
    
    //Override zoom level of the map
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
       this.setZoom(15);
       google.maps.event.removeListener(boundsListener);
    });	  
}

Google Maps API

he last thing you need to add to your script that is the Google Maps API —

</script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initiateGoogleMap">
</script>

One API key is required to display the Google Map. You can get your API key from Google Maps APIs.

You can download the complete source code from the below download link and please like and share the tutorial link.

About Mitrajit

One thought on “Add Google Map with multiple markers to your website

  1. hi,

    i dont want to show static data on my MAp. i want to use all this valuesyou declared in array are suppose to get through Database. can u give me soln for that

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove you are a human *