Google Maps API Tutorial

Translate this page:

Making your own custom markers

To make custom markers, you'll need a graphics program that supports partially transparent PNG images.

I've used Paint Shop Pro 8. In that program there's just one special thing to watch out for: don't use "save", use the PNG optimiser and specify "Alpha Channel Transparency".

To create a custom shadow, take a copy of your marker, change all the opaque points to black, reduce the opacity to about 50%, skew the image by about 45 degrees and add some blur.

I've also used POV-Ray to create custom 3d markers. Use the switches "+ua +fn" to create a partially transparent png file.

To create a shadow image in POV-Ray, I applied the keyword "noimage" to my marker object, and allowed the shadow to fall on a tilted plane

   plane {y,0 pigment {rgb 2} rotate -x*45}

In this case it's not possible to make the plane transparent directly from POV-Ray, the white plane needs to be removed with a suitable image editor.

GIcon.transparent

To create a transparentImage for your custom marker, simply load the marker image into an image editor, change the opacity to 1% and export the result as a 24-bit partially transparent PNG. The transparentImage allows the marker to correctly respond to clicks and mouseover events in IE when the marker is under a shadow. You can omit the transparentImage, in which case clicks and mouseovers will not work correctly for icons that are in shadow.

GIcon.imageMap

To get shadowed markers to correctly respond to clicks in other browsers, you need to create an imageMap. That's a lot trickier, and I'm not going to cover that in this tutorial.

GIcon.printImage and GIcon.mozPrintImage

Most browsers can't print partially transparent PNG images. Google has provided the option to provide printable GIF images instead. If you want your markers to be printable you can create the required GIF images by converting your PNG images to GIF format. For the GIcon.printImage Google a GIF with transparency that matches that of the PNG image. For GIcon.mozPrintImage Google use a non-transparent GIF with the background set to a pale grey.

In my experiments, Firefox seems to print the transparent GIFs just as well as the non-transparent ones, it just ignores the transparency when printing.

If you omit the GIcon.printImage and GIcon.mozPrintImage settings, then IE6 will print the main PNG images of the markers (ignoring the transparency) but Firefox will omit the markers from the print.

GIcon.printShadow

If you want shadows to be printed you need to provide a GIF image for this parameter. GIF images don't support partial transparency, but it is possible to dither the image, like this dithshadow.gif image used by Google

Third Party Markers

If you don't want to draw your own markers, you can find some markers that other people have made.

There's a list of available marker sets here: http://mapki.com/index.php?title=Icon_Image_Sets

Setting the GIcon parameters

Here's an example that uses the finger icon.

    var Icon = new GIcon();
      Icon.image = "mymarker.png";
      Icon.iconSize = new GSize(20, 34);
      Icon.shadow = "myshadow.png";
      Icon.shadowSize = new GSize(36, 34);
      Icon.iconAnchor = new GPoint(5, 34);
      Icon.infoWindowAnchor = new GPoint(5, 2);
      Icon.transparent = "mytran.png";
      Icon.printImage = "mymarkerie.gif";
      Icon.mozPrintImage = "mymarkerff.gif";
      Icon.printShadow = "myshadow.gif";
      Icon.imageMap=[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,
       19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,
       16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];

This enlarged image shows the anchor points used for this marker.

Icon.image is simply the name of the main image for the marker.
Icon.iconSize is the pixel size of the Icon.image
Icon.shadow (optional) is the name of the shadow image.
Icon.shadowSize is the pixel size of the Icon.shadow
Icon.iconAnchor (indicated by the red pixel) is the pixel which will be placed on the specified geographical location. You can think of it as the point that the image points at.
Icon.infoWindowAnchor (indicated by the green pixel) is the pixel that the tip of the info Window stem will touch.
Icon.transparent (optional) is the name of a transparent image used for capturing clicks and mouseovers in MSIE.
Icon.printImage (optional) is the name of a GIF file to be used for printing.
Icon.mozPrintImage (optional) is the name of a GIF file to be used for printing from the Mozilla/Firefox browser.
Icon.printShadow (optional) is the name of a GIF file to be used for printing the shadow.
Icon.imageMap (optional) is an array of integers representing the x/y coordinates of the image map used fopr capturing image clicks in non-IE browsers.

Note that the Size parameters are specified as GSize objects and the Anchor parameters are specified as GPoint objects.

In both cases, the values count from the top left corner which is considered to be the point (1,1). This may well be different from what you see in an image editing program, where the top left pixel is usually considered to be (0,0).

Positioning the infoWindowAnchor is an art rather than a science. You can see when it looks wrong but there doesn't seem to be any formula that will produce the result that looks right.

Required parameters

They're not actually mandatory. There are certain strange circumstances in which you might want to omit almost any parameter, but you should think carefully before omitting any of these parameters:

iconSize : without it your marker will have zero size and be invisible
iconAnchor : without it your marker won't appear in the correct place
infoWindowAnchor : without it marker.openInfoWindow() will fail
transparent : without it your marker won't be clickable in MSIE if there's an info window shadow nearby
imageMap : without it your marker won't be clickable in Firefox if there's an info window shadow nearby

Graham's Custom Marker Maker

If you don't want to go through all the bother of doing that yourself, then simply create the main image file and pass it to Graham's Custom Marker Maker www.powerhut.co.uk/googlemaps/custom_markers.php. You get back a zip file that contains files for all the other parts of the GIcon and some sample code with all the parameter settings.

Back to Mike's Homepage
Up to the start of this tutorial