Multiple marker with labels in google map
In this article you will see how to add multiple marker with label in google map (marker with label text), you can write your custom marker label text or use inbuilt A-Z marker icon , custom marker css and info window that will display on clicking marker.
Below is the two method that will add multiple marker in google map.
DownLoad MapWithMarker.JS Click Here
Eg:-
Below is the two method that will add multiple marker in google map.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//Generate Markers Value Array
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"title":'<%# Eval("Area") %>',
"lat": '<%# Eval("Latitute") %>',
"lng": '<%# Eval("Longitute") %>',
"description": '<%# Eval("Address") %>'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
Script render like this :
<script type="text/javascript">
//Generate Markers Value
Array
var markers = [
{
"title": 'Gombak Setia',
"lat": '3.218937',
"lng": '101.7167931',
"description": 'Gombak Setia, Kuala Lumpur, Wilayah Persekutuan Kuala
Lumpur, 53100'
},
{
"title": 'Jalan Desa Melawati',
"lat": '3.2331742',
"lng": '101.7061447',
"description": 'Jalan Desa Melawati, Kuala Lumpur, Wilayah Persekutuan
Kuala Lumpur, 53100'
},
{
"title": 'Jalan Intan (Gombak)',
"lat": '3.22317',
"lng": '101.71588',
"description": 'Jalan Intan (Gombak), Kuala Lumpur, Wilayah Persekutuan
Kuala Lumpur, 53100'
},
{
"title": 'Jalan Madrasah',
"lat": '3.218515',
"lng": '101.717801',
"description": 'Jalan Madrasah, Kuala Lumpur, Wilayah Persekutuan Kuala
Lumpur, 53100'
}
];
</script>
First Way MapWithMarker JS:
Use mapwithmarker.js script that will be use for writing label text upon marker icon, and css that is for how label text appears upon the marker icon, this will write numaric label value upon marker icon.DownLoad MapWithMarker.JS Click Here
<style type="text/css">
.labels { color: black; background-color: #FF8075; font-family: Arial; font-size: 11px; font-weight: bold; text-align: center; width: 12px; }
</style>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
for (i = 1; i <= markers.length; i++) {
var data = markers[i-1]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
title: data.title,
labelContent: i,
labelAnchor: new google.maps.Point(7, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
//HTML: Google map will render inside this div
<div id="dvMap" style="width: 800px; height: 700px;">
</div>
Second Way Marker Icon :
If you have only less than 26 markers then you can use this easy method marker icon which is provided by google only A-Z icon is available.Eg:-
http://maps.google.com/mapfiles/markerA.png
http://maps.google.com/mapfiles/markerB.png
http://maps.google.com/mapfiles/markerC.png
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
for (i = 1; i <= markers.length; i++) {
var letter = String.fromCharCode("A".charCodeAt(0) + i - 1);
var data = markers[i - 1]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
//HTML: Google map will render inside this div
<div id="dvMap" style="width: 800px; height: 700px;">
</div>
