GrassHopperPebbles.com Demos

JQuery Plugins

imGoogleMaps 0.9 - Custom Marker - Json Data

In this example, I set up the imGoogleMaps plugin to display custom marker icons from data in a json record. The custom marker icon data is loaded in the same json record as the address information. The primary reason to load the custom icons in a json record as opposed to using the custom_marker option is that you have the option of loading a different icon for each address.

If you are not using a user defined image, you have to load the MapIconMaker Utility in the head section of you page.

The custom marker icon data is loaded in the same json record as the address information.

 $json = '[';
$json .= '{"address": "1213 U St NW Washington, DC 20009", "custom_marker": [{"type": "labeledmarker", "primaryColor": "#FF0000", "strokeColor": "#000000", "labelColor": "#FFFFFF"}]},';
$json .= '{"address": "1100 Florida Ave NW Washington, DC 20009", "custom_marker": [{"type": "labeledmarker"}]},';
$json .= '{"address": "50 Massachusetts Ave NE Washington, DC 20002", "custom_marker": [{"type": "labeledmarker", "primaryColor": "#999999", "strokeColor": "#FF0000", "labelColor": "#FFFFFF", "starPrimaryColor": "#FFFF00", "starStrokeColor": "#0000FF"}]},';
$json .= '{"address": "1652 K St NW Washington, DC 20006", "custom_marker": [{"type": "flat", "width": "20", "height": "20", "primaryColor": "#00CC00", "labelSize": "0", "labelColor": "#0000FF", "shape": "circle"}]},';
$json .= '{"address": "1801 Connecticut Avenue NW Washington, DC 20009", "custom_marker": [{"type": "flat", "shape": "roundrect"}]},';
$json .= '{"address": "1401 K St NW Washington, DC 20005", "custom_marker": [{"type": "marker", "width": "30", "height": "30", "primaryColor": "#FFFF00", "starPrimaryColor": "#FF6600", "starStrokeColor": "#990099"}]}';
$json .= ']';
echo $json;

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

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