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.
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éolocalisation exacte</span>';
legend.appendChild(div);
var div = document.createElement('div');
div.innerHTML = '<span><img src="images/marker_approx.png"> Gé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!
You may also like: Generate multiple Google Maps on a page
Introduction to JSON (JavaScript Object Notation)
Easy Face Detection Using JQuery
Number Translation using PHP & JavaScript
About The Author
thedebuggers
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
I am new to Google Fusion Tables/Maps. Need to add legend. I have seen this code in other examples from different users but where do I put the code? No one has explained this. They just show the code. Are there better explanations on how to install the code, where to put it and where to put the other pieces of the puzzle CSS? Google APi key?
Thank you for taking the time to read this article.
The code illustrated in this article is meant to generate Google Map in webpages. You can find ‘Complete code’ at the bottom of the article. For the sake of learning, you can open Notepad or any other text editor and copy the code and change the “YOUR_API_KEY” (which is at the bottom part of the script) with your API key. Save the file with .html extension. When you open that file with Browser, you can see map.
To get API key, goto https://developers.google.com/maps/documentation/javascript/get-api-key . Click ‘GET A KEY’ button and follow the instruction.
To add legend, you need ‘HTML’ element and javascript code. More details in ‘Adding Legend’ section of the article.
Regarding CSS, you can put it in the same html file or external CSS file.
Hope this explains your query. If you are still in confusion, feel free to message me at The Debuggers Facebook page (https://www.facebook.com/thedebuggers/)
Great article. Thank you so much.