Adding Multiple Markers to Google Maps with JavaScript

Adding multiple markers to a Google Map is a common requirement for many web applications. In this tutorial, we will explore how to add multiple markers to a Google Map using the Google Maps JavaScript API.

Setting up the Map

To start, you need to include the Google Maps JavaScript API in your HTML file. You can do this by adding the following script tag:

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

Replace YOUR_API_KEY with your actual Google Maps API key.

Next, you need to create a container element for the map in your HTML file:

<div id="map" style="width: 500px; height: 400px;"></div>

Creating the Map Object

To create the map object, you need to use the google.maps.Map constructor and pass it the container element and some options:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

This code creates a map object with a zoom level of 10, centered at the coordinates (-33.92, 151.25), and displays a roadmap.

Adding Markers

To add markers to the map, you need to use the google.maps.Marker constructor and pass it some options:

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-33.890542, 151.274856),
  map: map
});

This code creates a marker object at the coordinates (-33.890542, 151.274856) and adds it to the map.

Adding Multiple Markers

To add multiple markers to the map, you can use a loop to create an array of marker objects:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
  ['Cronulla Beach', -34.028249, 151.157507]
];

for (var i = 0; i < locations.length; i++) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
}

This code creates an array of marker objects at the specified coordinates and adds them to the map.

Adding Info Windows

To add info windows to the markers, you need to use the google.maps.InfoWindow constructor and pass it some options:

var infowindow = new google.maps.InfoWindow({
  content: 'Hello World!'
});

marker.addListener('click', function() {
  infowindow.open(map, marker);
});

This code creates an info window with the content "Hello World!" and opens it when the marker is clicked.

Marker Clustering

If you have a large number of markers on your map, it can become cluttered and difficult to navigate. To solve this problem, you can use marker clustering, which groups nearby markers together into clusters.

var markerCluster = new MarkerClusterer(map, markers, {
  gridSize: 50,
  minimumClusterSize: 2
});

This code creates a marker cluster object that groups nearby markers together into clusters.

Example Code

Here is an example of how to add multiple markers to a Google Map with JavaScript:

var map;
var markers = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var locations = [
    ['Bondi Beach', -33.890542, 151.274856],
    ['Coogee Beach', -33.923036, 151.259052],
    ['Cronulla Beach', -34.028249, 151.157507]
  ];

  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    markers.push(marker);
  }

  var infowindow = new google.maps.InfoWindow();

  for (var i = 0; i < markers.length; i++) {
    google.maps.event.addListener(markers[i], 'click', function() {
      infowindow.setContent('Hello World!');
      infowindow.open(map, this);
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

This code creates a map object with multiple markers and info windows. When a marker is clicked, an info window opens with the content "Hello World!".