GrassHopperPebbles.com Demos

JQuery Plugins

imGoogleMaps 0.9 - Custom Marker

In this example, I set up the imGoogleMaps plugin to display custom marker icons. If you are not using a user defined image, you have to load the MapIconMaker Utility in the head section of you page.

You can add the custom icons to your map by using either the custom_marker option or adding the option to your json record. In this example, I am using the custom_marker option.

If using the MapIconMaker Utility, you have three marker types: marker (non-labeled), labeledmarker, or flat. Each marker type has it's own configuration options:

//marker
custom_marker: {'type': 'marker', 'width': '32', 'height': '32', 'primaryColor': '#FFD766A', 'strokeColor': '#000000', 'cornerColor': '#FFFFFF'}
 
//labeledmarker
custom_marker: {'type': 'labeledmarker', 'primaryColor': '#FFD766A', 'strokeColor': '#000000', 'labelColor': '#000000', 'starPrimaryColor': '', 'starStrokeColor': ''}
 
 //flat
custom_marker: {'type': 'flat', 'width': '32', 'height': '32', 'primaryColor': '#FFD766A', 'labelSize': '14', 'labelColor': '#000000', 'shape': 'circle'}
//other shape option: roundrect

The values displayed in the options above are the default, so if I want to create a custom marker of type marker, but only want to change the primaryColor, I can add the option with:

custom_marker: {'type': 'marker', 'primaryColor': '#FF6600'}

The starPrimaryColor and starStrokeColor do not have a default value. So if the values are not present then star will not appear on the custom icon.

custom_marker: {'type': 'labeledmarker', 'primaryColor': '#FFD766A', 'strokeColor': '#000000', 'labelColor': '#000000'}

You can use the MarkerIconOptions Wizard to preview the look of your custom marker.

View the source code for this page to see how to set up the plugin. For documentation on the imGoogleMaps plugin, see my original post: JQuery Plugin: imGoogleMaps, the imGooglMaps - 0.9 post that discusses multiple addresses and street view options, and imGooglMaps - 0.9.2 post that discusses Custom Markers

Tags

, , , , , , , , , , , ,