In this article I will explain how to display custom Image Marker Icon in Google Maps V3.
 
Generating Custom Image Marker Icons
In order to download the Custom Image Marker Icons for Google Maps, please visit the following link as it allows you create and download free Custom Image Marker Icons for Google Maps.
 
 
HTML Markup
The HTML markup consists of an HTML Table containing two cells, one for displaying the Google Map and other one for displaying the map legend.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <div id="dvMap" style="width: 500px; height: 500px">
        </div>
    </td>
    <td id="legend">
    </td>
</tr>
</table>
 
 
Displaying Custom Image Marker Icons in Google Maps V3
The below script is used to display Google Maps of Mumbai city with some public places displayed on the map using markers.
The various public places are fed to the map using an array and a loop is executed inside which a marker is generated and added to the Google Map. For each public place I have assigned a unique Image Marker Icon URL.
Finally a loop is executed over the Array items and one by one each Marker is added to Google Maps. In order to show the Custom Image Icon as Google Maps Marker, you need to set the URL of the Image Icon to the Icon property of the Google Maps Marker object.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
{
    "title": 'Bombay Hospital',
    "lat": '18.9409388',
    "lng": '72.82819189999998',
    "description": 'Bombay Hospital',
    "type": 'Hospital',
    "icon": "Markers/letter_a.png"
},
{
    "title": 'Jaslok Hospital',
    "lat": '18.9716956',
    "lng": '72.80991180000001',
    "description": 'Jaslok Hospital',
    "type": 'Hospital',
    "icon": "Markers/letter_b.png"
},
{
    "title": 'Lilavati Hospital',
    "lat": '19.0509488',
    "lng": '72.8285644',
    "description": 'Lilavati Hospital',
    "type": 'Hospital',
    "icon": "Markers/letter_c.png"
},
{
    "title": 'Aksa Beach',
    "lat": '19.1759668',
    "lng": '72.79504659999998',
    "description": 'Aksa Beach',
    "type": 'Beach',
    "icon": "Markers/letter_d.png"
},
{
    "title": 'Juhu Beach',
    "lat": '19.0883595',
    "lng": '72.82652380000002',
    "description": 'Juhu Beach',
    "type": 'Beach',
    "icon": "Markers/letter_e.png"
},
{
    "title": 'Girgaum Beach',
    "lat": '18.9542149',
    "lng": '72.81203529999993',
    "description": 'Girgaum Beach',
    "type": 'Beach',
    "icon": "Markers/letter_f.png"
},
{
    "title": 'Oberoi Mall',
    "lat": '19.1737704',
    "lng": '72.86062400000003',
    "description": 'Oberoi Mall',
    "type": 'Mall',
    "icon": "Markers/letter_g.png"
},
{
    "title": 'Infinity Mall',
    "lat": '19.1846511',
    "lng": '72.83454899999992',
    "description": 'Infinity Mall',
    "type": 'Mall',
    "icon": "Markers/letter_h.png"
},
{
    "title": 'Phoenix Mall',
    "lat": '19.0759837',
    "lng": '72.87765590000003',
    "description": 'Phoenix Mall',
    "type": 'Mall',
    "icon": "Markers/letter_i.png"
},
{
    "title": 'Jijamata Udyan',
    "lat": '18.979006',
    "lng": '72.83388300000001',
    "description": 'Jijamata Udyan',
    "type": 'Park',
    "icon": "Markers/letter_j.png"
},
{
    "title": 'Sanjay Gandhi National Park',
    "lat": '19.2147067',
    "lng": '72.91062020000004',
    "description": 'Sanjay Gandhi National Park',
    "type": 'Park',
    "icon": "Markers/letter_k.png"
}
];
window.onload = function () {
    LoadMap();
}
function LoadMap() {
    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    var legend = document.getElementById("legend");
    legend.innerHTML = "";
    for (var i = 0; i < markers.length; i++) {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title,
            icon: data.icon
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent("<div style = 'width:100px;height:40px'>" + data.description + "</div>");
                infoWindow.open(map, marker);
            });
        })(marker, data);
        latlngbounds.extend(marker.position);
 
        legend.innerHTML += "<div style = 'margin:5px'><img align = 'middle' src = '" + marker.icon + "' />&nbsp;" + marker.title + "</div>";
    }
    var bounds = new google.maps.LatLngBounds();
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);
}
</script>
 
 
Screenshot
Display Custom Image Marker Icons in Google Maps V3
 
 
Demo
View Demo
 
 
Downloads
Download Code