Google Maps API Tutorial Google Maps API Tutorial
Back to Home Page

Example of a Customized Marker for Google Maps API

View Example


Notes

The key is to add customized icon images in marker options:
            icon: 'images/restaurant.png',
    	    shadow: 'images/restaurant.shadow.png',
As you may see, this approach is simple, but it may not align the marker image and shadow image when the sizes of these images do not match. To fix this issue, please check the other tutorial.

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Customized Marker Icon</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}
</style>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(37.286172, -121.80929),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        var myLatlng = new google.maps.LatLng(37.286172, -121.80929);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            icon: 'images/restaurant.png',
    	    shadow: 'images/restaurant.shadow.png',
            title: 'Customized Marker'
        });        
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>


Other Used Files

images/restaurant.png
images/restaurant.shadow.png