MapIconMaker How-to

You can use the MapIconMaker to create icons for your map markers easily:

  1. Include mapiconmaker.js in your document header. You can reference it from here or download it to your own server.
    <script src="mapiconmaker.js" type="text/javascript"></script>
  2. Create an icon using MapIconMaker.createMarkerIcon and add it to the map.
  3.   var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(37.441944, -122.141944), 13);
      var newIcon = MapIconMaker.createMarkerIcon({width: 64, height: 64, primaryColor: "#00ff00"});
      var marker = new GMarker(map.getCenter(), {icon: newIcon});

View example (createmarkericon-simple.html).

Creating Different Icon Types

There are three basic types of icons that you can create and customize, using one of the three provided static functions. The following table summarizes them, shows a sample marker, and links to an example. For a full description, read the reference.

createFlatIcon The icons can be dynamically sized and colored, can be either circular or rectangular in shape, and can have text overlaid on them. They will appear to lie 'flat' on the map because of their shape.
View example (createflaticon-simple.html).
createLabeledMarkerIcon The icons can be dynamically colored and can have text overlaid on them, but can only be one shape and size (marker-shape, 32*32). They can optionally have a dynamically colored star attached to the corner.
View example (createlabeledmarkericon-simple.html).
createMarkerIcon The icons can be dynamically sized and colored, but cannot have any text overlaid on them.
View example (createmarkericon-simple.html).

Using the MarkerIconOptions Wizard

We've created a wizard to make it easy for you to play around with the various parameters in MarkerIconOptions. The wizard lets you choose an icon type, customize the relevant options, and then shows you the result using randomly placed markers on a map.

View example (markericonoptions-wizard.html).