learn web technologies, the easy way

How to create Custom Map Markers

During this lesson, you'll learn how to create custom markers for your map as well as how to tell Google maps to display them.

Standard Google map markers may work just fine for you. However, if you want your maps to stand out, you should consider using something out of the ordinary, something that makes sense for the information that you're trying to convey. A marker can appear as anything you want: a pencil, a dog, a pizza, etc. It's all up to you.

A marker is actually a kind of place holder. It has certain properties such as position (latitude and longitude), behavior (responds to mouse events), but also other important properties like "icon" which specifies the graphical representation of the marker within the map. If you specify nothing as the icon type within the Marker properties, then you'll see the standard Google map icon. If you, on the other hand, type the name of an "icon object", you'll get whatever icon you specified when creating that object. That is the trick to creating your own custom markers.

Specifying the Marker's Icon

There are two parts to a map marker graphic representation. One is the graphic, or icon, itself. The other is the icon's shadow. NOTE: You should always have a shadow based on the icon you're using. Otherwise the 3D effect won't work. If you don't know how to do this, we will show you in a future lesson, but for now you can use the free shadow utility provided at http://www.cycloloco.com/shadowmaker/.

In the box below you can see that we create a new "images", one for the new icon and one for the icon's shadow. (You'll need to create new sets of image objects for each unique custom marker you need to create for a given map). The other lines within the "image" deinition specify:

  1. the size (width and height) of the image
  2. the location of the origin of the image
  3. the anchor location of the image

var html_text	= 'Hey, it works!';
var infowindow = new google.maps.InfoWindow({
    content: html_text

var green-pin = new google.maps.MarkerImage('images/pin_green.png',
   new google.maps.Size(20, 32),
   new google.maps.Point(0,0),
   new google.maps.Point(0, 32));
var pin-shadow = new google.maps.MarkerImage('images/sm_shadow.png',
   new google.maps.Size(37, 32),
   new google.maps.Point(0,0),
   new google.maps.Point(0, 32));
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    shadow: pin-shadow,
    icon: green-pin,
    title:'San Francisco'
google.maps.event.addListener(marker, 'mouseover', function() {

Putting it all together

Now if we put all this together we will have a map of San Francisco with two different markers. The redish marker is the default type, that means if you don't enter anything in the "image" or "shadow" properties, you will end up with this marker. The small green marker is the new custom marker we've just defined.