Adding Custom Markers on Google Map

Markers are user to identify locations on a Map. By default Google map display a standard image as map marker. But you can change the image or you can use a custom image as Google map marker.     

Display standard marker on Google Map

In the previous article we have discuss how to add or embed a Google map in your web page. Now we will display standard marker on that map.
Insert the following div where you want to display the map.  

<div id="myMap"></div>

CSS Code

<style>
#myMap {
   height: 350px;
   width: 680px;
}
</style>

JavaScript Code

First include Include API file from Google. The follow code will generate Google map in 'myMap' div and display a standard marker.
.  

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=[YOUR KEY]">
</script>
<script>
var map;
var myLatlng = new google.maps.LatLng(20.1979279,85.8179039);

function initialize() {
var mapOptions = {
zoom: 8,
center: myLatlng 
};
map = new google.maps.Map(document.getElementById('myMap'),mapOptions);

// To add the marker to the map
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Bhubaneswar Odisha!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Output

Display Multiple Markers

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=[YOUR KEY]">
</script>
<script>
var map;

var places = [
['Bhubaneswar', 20.2960587, 85.8245398],
['Cuttack', 20.462521, 85.8829895],
['Puri', 19.8133822, 85.8314655],
['Konark', 19.8920686, 86.091184],
['Sambalpur', 21.466222, 83.9751639]
];

function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(20.2960587, 85.8245398)
}
var map = new google.maps.Map(document.getElementById('myMap'),mapOptions);
setMarkers(map, places);
}

function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var place = locations[i];
var myLatLng = new google.maps.LatLng(place[1], place[2]);
var marker = new google.maps.Marker({
position: myLatLng,
title: place[0]
});
marker.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Output

Display Custom Markers

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=[YOUR KEY]">
</script>
<script>
var map;
var places = [
['Bhubaneswar', 20.2960587, 85.8245398,'bhubaneswar.png'],
['Cuttack', 20.462521, 85.8829895,'cuttack.png'],
['Puri', 19.8133822, 85.8314655,'puri.png'],
['Konark', 19.8920686, 86.091184,'konark.png'],
['Sambalpur', 21.466222, 83.9751639,'sambalpur.png']
];

function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(20.2960587, 85.8245398)
}
var map = new google.maps.Map(document.getElementById('myMap'),mapOptions);
setMarkers(map, places);
}

function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var place = locations[i];
var myLatLng = new google.maps.LatLng(place[1], place[2]);
var marker = new google.maps.Marker({
position: myLatLng,
icon: 'mapicons/'+place[3],
title: place[0]
});
marker.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Output

Create a draggable marker

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=[YOUR KEY]">
</script>
<script>
var map;
var myLatlng = new google.maps.LatLng(20.1979279,85.8179039);

function initialize() {
var mapOptions = {
zoom: 5,
center: myLatlng 
}
var map = new google.maps.Map(document.getElementById('myMap'),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"
});
marker.setMap(map);

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Output

Using draggable marker lets generate Latitude, Longitude and postal address of any location. Click here to get the code.