JQuery Plugin: imGoogleMaps-0.9.2, Custom Marker Icons

I recently had to update my imGoogleMaps JQuery Plugin due to problems that arose from the Geocode request rate limitations. As I researched the problem, I delved even more into the Google Maps API. Although this is a minor release, I decided to add custom marker icons to this version. Now you should be able to easily add custom markers to your Google Maps without having to worry about creating the underlying Google Maps API code – JQuery and the imGoogleMaps plugin helps you create a customized map in the fraction of the time. I also added the ability to display a phone number and a description for each address in the infoWindow.

To review the imGoogleMaps plugin you should read the post, JQuery Plugin: imGoogleMaps 0.9 – Multiple Addresses, Street View

MapIconMaker

imGoogleMaps 0.9.2 has number of custom marker icon options. For many of these options you need to add the MapIconMaker utility to your web page.

<script type="text/javascript" src="http://grasshopperpebbles.com/demos/assets/js/jquery/jquery-1.3.2.min.js"></script>
 
<!-- load map icon maker -->
<script type="text/javascript" src="http://grasshopperpebbles.com/demos/assets/js/jquery/imgooglemaps/mapiconmaker_packed.js"></script>
 
<script type="text/javascript" src="http://grasshopperpebbles.com/demos/assets/js/jquery/improgressbar/jquery.imProgressBar-0.5.js"></script>
 
<script type="text/javascript" src="http://grasshopperpebbles.com/demos/assets/js/jquery/imgooglemaps/jquery.imGoogleMaps-0.9.js"></script>

To add custom marker icons to your Google map, use the custom_marker option. When using the custom_marker with 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 <strong>shape</strong> option: roundrect

The values displayed in the options above are the defaults, 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'}

To preview/design your marker icons, use the MapIconMaker, you can use the MarkerIconOptions wizard.

Add Custom Icon To Google Maps Using Map Icon Maker

To add a custom marker icon using the the custom_marker option:

$(document).ready(function(){
	$('#mapInfoManual').imGoogleMaps({
		data_url: "<?php echo base_url() . $this->config->item('jquery_assets') .'imgooglemaps/multiple.php'; ?>",
		data_type: 'json',
		map: 'googMap',
		menu_class: 'googControls',
		print_class: 'googPrint',
		mode: "manual",
		show_directions_menu: false,
		progress_bar: {container: 'imProgBarCntnr', bar_back_class: 'imBarBack', bar_class: 'imProgBar'},
		geocode_request_rate: 5000, 
		custom_marker: {'type': 'labeledmarker', 'primaryColor': '#FF0000', 'strokeColor': '#000000', 'labelColor': '#FFFFFF', 'starPrimaryColor': '#FFFF00', 'starStrokeColor': '#0000FF'}
	});	
});

JSON Data

You can also add custom marker icons using the data_url option. 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.

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 should notice that I am using the imProgressBar plugin (see imProgressBar plugin.

Custom Maker Icon – User Image

You can also use custom image icons with the custom_marker option.

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

In the next example, I am using icon images from http://code.google.com/p/google-maps-icons/. This repository has over 800 icons.

$(document).ready(function(){
	$('#mapInfoManual').imGoogleMaps({
		data_url: "imgooglemaps/custom_marker_user_image.php",
		data_type: 'json',
		map: 'googMap',
		menu_class: 'googControls',
		print_class: 'googPrint',
		mode: "manual",
		show_directions_menu: false
	});	
});

custom_image_user_image.php:

Notice the custom_marker.type is equal to ‘user_image’. This let’s imGoogleMaps know that you are going to provide the marker icon. You must then provide the image location, width, and height. 
Rather than downloading the files from http://code.google.com/p/google-maps-icons/, I just linked to them using the url: 
http://google-maps-icons.googlecode.com/files/+ image name
Phone Number and Description
In the imGoogleMaps 0.9 upgrade, I added the ability to display a business name in the infoWindow. In this 0.9.2 version, you can also display a phone number and description in the infoWindow.

?View Code PHP
$json = '[';
$json .= '{"address": "1213 U St NW Washington, DC 20009", "name": "Ben\'s Chilli Bowl", "phone": "202-234-2343", "desc": "The Best Chilly in Town!"},';
$json .= '{"address": "1100 Florida Ave NW Washington, DC 20009", "name": "Florida Avenue Grill", "phone": "202-243-2333", "desc": "The Best Grill in Town!"},';
$json .= '{"address": "50 Massachusetts Ave NE Washington, DC 20002", "name": "B Smith\'s", "phone": "202-244-2444", "desc": "The Best Smith in Town!"},';
$json .= '{"address": "1652 K St NW Washington, DC 20006", "name": "McCormick & Schmick\'s", "phone": "202-222-2222", "desc": "The Best McCormick in Town!"},';
$json .= '{"address": "1801 Connecticut Avenue NW Washington, DC 20009", "name": "Ruth\'s Chris Steak House", "phone": "202-111-1111", "desc": "The Best Steak in Town!"}';
$json .= ']';
echo $json;

By adding ‘phone’ and ‘desc’ to the json record, imGoogleMaps will know to add it to the infoWindow. The phone will be styled the same as the address, but you can style the description separately.

?View Code CSS
span.imDescription {
	color:#6699CC;
	font: bold 11px Helvitica, Arial, sans-serif;
	font-style:italic;
}

That’s it. Now you can easily add custom marker icons to a Google Map. You get the imGoogleMaps plugin from JQuery Plugins or Google Code. You can view demos here.