Creating a map with multiple markers - Google Maps API JavaScript v3

Creating a map with multiple locations without using a database may be limited but it has its advantages where the number of places is reduced.
When you want to place up to 10 or 15 markers on a Google map in your website, it may be more effective to include it in a variable next to the code that creates the map.
In this article I will not go on the details of creation of maps, markers or infowindow. This information is available in the following articles:

• How to create a map with Google Maps API v3
• Add a marker with Google Maps JavaScript API v3
• Info Window on Google Maps API JavaScript v3

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

Defining markers information

First it is necessary to define the position of the marker in the map and the information to be shown in the Info Window.
The information is stored in an array of objects variable called markersData like shown below:

JavaScript /map.jsen.marnoto.com

var markersData = [
  {
      lat: 40.6386333,
      lng: -8.745,
      name: "Camping Praia da Barra",
      address1:"Rua Diogo Cão, 125",
      address2: "Praia da Barra",
      postalCode: "3830-772 Gafanha da Nazaré" // don’t insert comma in the last item of each marker
   },
   {
      lat: 40.59955,
      lng: -8.7498167,
      name: "Camping Costa Nova",
      address1:"Quinta dos Patos, n.º 2",
      address2: "Praia da Costa Nova",
      postalCode: "3830-453 Gafanha da Encarnação" // don’t insert comma in the last item of each marker
   },
   {
      lat: 40.6247167,
      lng: -8.7129167,
      name: "Camping Gafanha da Nazaré",
      address1:"Rua dos Balneários do Complexo Desportivo",
      address2: "Gafanha da Nazaré",
      postalCode: "3830-225 Gafanha da Nazaré" // don’t insert comma in the last item of each marker
   } // don’t insert comma in last item
];

This way of storing information is not the most effective from the viewpoint of performance of the JavaScript code. However what is intended here is to show, in the clearest possible way, how to create a procedure to insert multiple markers on a map.

How to create markers

To enter the previously defined markers on the map it is necessary to create a function (displayMarkers()) that goes through each item in markersData object array  and create the respective marker using the function (createMarker()).
Let's take a look at the code:

JavaScript /map.jsen.marnoto.com

// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){

   // this variable sets the map bounds and zoom level according to markers position
   var bounds = new google.maps.LatLngBounds();

   // For loop that runs through the info on markersData making it possible to createMarker function to create the markers
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var postalCode = markersData[i].postalCode;

      createMarker(latlng, name, address1, address2, postalCode);

      // Marker’s Lat. and Lng. values are added to bounds variable
      bounds.extend(latlng); 
   }

   // Finally the bounds variable is used to set the map bounds
   // with API’s fitBounds() function
   map.fitBounds(bounds);
}

The comments inserted in the code should be sufficient to understand how this function behaves. This function runs on each item in markersData variable and calls createMarker function, passing its information. Additionally the bounds variable stores the position of each marker. This variable will be used as the parameter for fitBounds() function.

Now let’s look at the function createMarker():

JavaScript /map.jsen.marnoto.com

// This function creates each marker and sets their Info Window content
function createMarker(latlng, name, address1, address2, postalCode){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name
   });

   // This event expects a click on a marker
   // When this event is fired the infowindow content is created
   // and the infowindow is opened
   google.maps.event.addListener(marker, 'click', function() {
      
      // Variable to define the HTML content to be inserted in the infowindow
      var iwContent = '<div id="iw_container">' +
      '<div class="iw_title">' + name + '</div>' +
      '<div class="iw_content">' + address1 + '<br />' +
      address2 + '<br />' +
      postalCode + '</div></div>';
      
      // including content to the infowindow
      infoWindow.setContent(iwContent);

      // opening the infowindow in the current map and at the current marker location
      infoWindow.open(map, marker);
   });
}

Markers are added to the map through the variable marker. Additionally, the Info Window content is created for each marker.

These two functions are meaningless by themselves without the function that initializes the creation of the map:

JavaScript /map.jsen.marnoto.com

function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // a new Info Window is created
   infoWindow = new google.maps.InfoWindow();

   // Event that closes the InfoWindow with a click on the map
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Finally displayMarkers() function is called to begin the markers creation
   displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

View example

This example shows how to add multiple markers on a map. There is only one Info Window that will be used for all markers. This means that only one Info Window can be shown at each click on a marker.

Download the necessary files for this example

• multiple_markers.zip

As usual, all doubts and comments are welcome. Please use the comments section so that all can share on the information.

Share:

Tags:

Google Maps API V3 Info Window Markers

Miguel Marnoto

My expertise in the Google Maps JavaScript API v3 is a consequence of my enthusiasm about maps and recognition of the importance that Google Maps service has on people lives.

Founder @ ViverAveiro.pt

• Facebook
• Google+
• Twitter
• LinkedIn
• Rss