Add multiple custom markers with legend in Google Map

In order to identify a location on a map, markers (also referred as ‘pin’) are used. You can use custom images (icons) instead of default standard image for markers. Adding custom markers is very easy with Google Maps.

Today we’re going to look how to add multiple custom markers as well as legend in Google Map.

For illustration,  I am going to place markers on some random locations around Eiffel Tower in Paris. In addition to this, I will use two different images to show exact location and approximate location. Our final Map will looks like the following screenshot.

Multiple custom markers with legend in gmap

 

Getting started with Google Map (gmap)

In order to use the Google Maps JavaScript API, you must have Google API key which you can add to your app. If you don’t have one, get it by following the steps mentioned in Google Maps APIs documentation.

After having Google API key, get location data (latitude and longitude) of random places so that we can put makers on those locations. Here’s  coordinates (longitude and latitude) of my selected locations:

var locations = [
      {"name": "Eiffel Tower", "lat":"48.85837", "lng":"2.294481", "is_exact": true},
      {"name": "UNESCO", "lat":"48.849560" ,"lng":"2.306326", "is_exact": false},
      {"name": "Random 1", "lat":"48.8532774","lng":"2.2438649", "is_exact": false},
      {"name": "Random 2", "lat":"48.8413031","lng":"2.3106412", "is_exact": true},
      {"name": "Random 3", "lat":"48.878716","lng":"2.290306", "is_exact": false}
   ];

I have put my location’s data in JSON format. ‘is_exact‘ denotes whether the location is exact or not.

Now, get 2 different icons for exact and approximate locations.

Adding multiple custom markers

You need to create object of type Marker(google.maps.Marker) to place marker on the map.

var marker = new google.maps.Marker({
          position: new google.maps.LatLng(location.lat,  location.lng),
          title: location.name, 
          map: map
        });
    }

If you don’t specify the icon property of the marker, it shows default image for marker. In order to use custom image for marker, you need to set icon property. Here’s the snippet.

var markerIcon = (location.is_exact) ? 'marker_exact.png' : 'marker_approx.png';
var markerIcon = 'images/' + markerIcon;


var marker = new google.maps.Marker({
      position: new google.maps.LatLng(location.lat,  location.lng),
      icon: markerIcon,
      title: location.name, 
      map: map
    });
}

To add another marker, you just need to change the position in the Markers’ constructor with another latitude longitude information.

 

Adding Legend

If you are using multiple icons, it’s a good idea to show custom legend to describe the symbols and markers on a map.

In order to create legend, you need to create the legend container. Here’s sample div to hold legend.

<div id="mapLegend">
  <h2>Legend</h2>
</div>

Now that we have created container for legend, append content for legend and add this container (element) to the Map’s controls property. Here’s the snippet:

/* Adding Map Legends */

var legend = document.getElementById('mapLegend');

div= document.createElement('div');
div.innerHTML = '<span><img src="images/marker_exact.png"> Exact Location</span>';
legend.appendChild(div);

var div = document.createElement('div');
div.innerHTML = '<span><img src="images/marker_approx.png"> Approximate Location</span>';
legend.appendChild(div);

/* Push Legend to Right Top */
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend);

 

 

Putting it all together

Apart from HTML and JavaScript, you need CSS to customize map. Here’s the complete code to create multiple custom markers along with legends.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adding Multiple Custom Markers with Legend</title>
<style>
#mapCanvas {
  width: 775px;
  height: 500px;
  margin: 0 auto;
}
#mapLegend {
  background: #fdfdfd;
  color: #3c4750;
  padding: 0 10px 0 10px;
  margin: 10px;
  font-weight: bold;
  filter: alpha(opacity=80);
  opacity: 0.8;
  border: 2px solid #000;
}
#mapLegend div {
  height: 40px;
  line-height: 25px;
  font-size: 1.2em;
}
#mapLegend div img {
  float: left;
  margin-right: 10px;
}
#mapLegend h2 {
  text-align: center
}
</style>
</head>

<body>
<div id="mapContainer">
  <div id="mapCanvas"></div>
  <div id="mapLegend">
    <h2>Légende de carte</h2>
  </div>
</div>
<script type="text/javascript">

var map;

var locations = [
      {"name": "Eiffel Tower", "lat":"48.85837", "lng":"2.294481", "is_exact": true},
      {"name": "UNESCO", "lat":"48.849560" ,"lng":"2.306326", "is_exact": false},
      {"name": "Random 1", "lat":"48.8532774","lng":"2.2438649", "is_exact": false},
      {"name": "Random 2", "lat":"48.8413031","lng":"2.3106412", "is_exact": true},
      {"name": "Random 3", "lat":"48.878716","lng":"2.290306", "is_exact": false}
   ];


function drawMap() {

    var centerMap = new google.maps.LatLng(48.8583701, 2.2922873);
    
    var myOptions = {
      zoom: 13,
      center: centerMap,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      fullscreenControl: false 
     }

    map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
    
    setMarkers(locations);
    
    
    /* Adding Map Legends */
    
    var legend = document.getElementById('mapLegend');
    
    div= document.createElement('div');
    div.innerHTML = '<span><img src="images/marker_exact.png"> G&eacute;olocalisation exacte</span>';
    legend.appendChild(div);
    
    var div = document.createElement('div');
    div.innerHTML = '<span><img src="images/marker_approx.png"> G&eacute;olocalisation approximative</span>';
    legend.appendChild(div);
    
    /* Push Legend to Right Top */
    map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend);
    
 }


  function setMarkers(locations) {
    for (i=0; i < locations.length; i++) {
      var location = locations[i];
      plotMarker(location)
    }
  }
  
  function plotMarker(location) {
    

    var markerIcon = (location.is_exact) ? 'marker_exact.png' : 'marker_approx.png';
    var markerIcon = 'images/' + markerIcon;
    
    
    var marker = new google.maps.Marker({
          position: new google.maps.LatLng(location.lat,  location.lng),
          icon: markerIcon,
          title: location.name, 
          map: map
        });
    }
  

</script> 
<script async defer src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY&callback=drawMap"></script>
</body>
</html>

Hence, we can add custom markers with legends in Google Map. In coming days, I will come with more articles on Google Map (gmap) integration. Till then, stay tuned!

 

2 Comments

Leave a Reply