GrassHopperPebbles.com Demos

JQuery Plugins

imGoogleMaps 0.9 - Custom Marker - User Image

In this example, I set up the imGoogleMaps plugin to display custom marker icons from custom images that I downloaded from Google Code. The have a wide variety of custom map icons. (the map-icons-collection-1.9 set includes over 800 icons).

If you are using a user defined image, you do not have to load the MapIconMaker Utility.

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

$icon_folder = 'http://google-maps-icons.googlecode.com/files/';
$json = '[';
$json .= '{"address": "1213 U St NW Washington, DC 20009", "custom_marker": [{"type": "user_image", "image_loc": "' . $icon_folder . "restaurant.png" . '", "width": "32", "height": "37"}]},';
$json .= '{"address": "1100 Florida Ave NW Washington, DC 20009", "custom_marker": [{"type": "user_image", "image_loc": "' . $icon_folder . "restaurantchinese.png" . '", "width": "32", "height": "37"}]},';
$json .= '{"address": "50 Massachusetts Ave NE Washington, DC 20002", "custom_marker": [{"type": "user_image", "image_loc": "' . $icon_folder . "restaurantindian.png" . '", "width": "32", "height": "37"}]},';
$json .= '{"address": "1652 K St NW Washington, DC 20006", "custom_marker": [{"type": "user_image", "image_loc": "' . $icon_folder . "restaurantitalian.png" . '", "width": "32", "height": "37"}]},';
$json .= '{"address": "1801 Connecticut Avenue NW Washington, DC 20009", "custom_marker": [{"type": "user_image", "image_loc": "' . $icon_folder . "restaurantmexican.png" . '", "width": "32", "height": "37"}]},';
$json .= '{"address": "1401 K St NW Washington, DC 20005", "custom_marker": [{"type": "user_image", "image_loc": "' . $icon_folder . "restaurantgourmet.png" . '", "width": "32", "height": "37"}]}';
$json .= ']';
echo $json;

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

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