JQuery Plugin: imGoogleMaps 0.9 – Multiple Addresses, Street View

I finally found the time to upgrade imGoogleMaps JQuery plugin. When I first began the upgrade, my plan was to only add the handful of items that were requested by a few users (and fix a few bugs). When the upgrade was complete, I had incorporated the GStreetviewPanorama object and Street View Overlay into the plugin. I also added the ability to plot multiple addresses ajaxally via a json object and add a business name to the infoWindow.

Quick Overview – 0.5 Version

The imGoogleMaps plugin has two modes – auto mode and manual

mode.

Auto Mode
In auto mode, enter and address that you want plotted and the Google Map will be built for you.

First you define a container for the map interface:

#mapInfo {
	float: left;
	width: 640px;
	color: #fff;
	font: bold 11px Helvitica, Arial, sans-serif;
	margin-left:50px;
}

Then you use the imGoogleMaps plugin to add the map interface to the container:

?View Code JAVASCRIPT
$(document).ready(function(){
	$('#mapInfo').imGoogleMaps({
		address: 'Cheyenne Mountain Colorado Springs, CO'
	});
});

You can optionally add a few other options to the plugin (map dimensions, directions background and text color, and menu bar background and text color).

?View Code JAVASCRIPT
$(document).ready(function(){
	$('#mapInfo').imGoogleMaps({
		address: 'Cheyenne Mountain Colorado Springs, CO',
		//optional 
		map: {"width": "400px", "height": "400px"},
		//optional
		directions: {"background": "#fff", "text": "#000"},
		//optional
		menu_bar: {"background": "#3366cc", "text": "#fff"}
	});
});

Manual Mode
Manual mode gives you much more flexibility as you can define each component of the map interface via CSS.

/* map interface container */
#mapInfoManual {
	float: left;
	color: #fff;
	font: bold 11px Helvitica, Arial, sans-serif;
	width:807px;
	background-color:#000;
}
#mapInfoManual a {
	text-decoration:none;
	margin-left:5px;
	line-height:26px;
	color:#fff;
}
/* map container */
#googMap {
	  float:right;
	  width:500px;
	  height:400px;
	  border: solid thin #fff;
	  color:#000;
}
#googMap a {
	color:#0000ff;
}
/* google directions container */
#googDir {
       float:left;
       width:300px;
       height:400px;
       background-color:#000;
       color:#fff;
       overflow: auto; /*used to scroll */
       margin-right:2px;
       border: solid thin #fff;
}
/* google menu item styles - directions, print */
.googControls {
      float:left;
      width:100%;
      height:30px;
      background-color:#000;
      margin-bottom:2px;
      border: solid thin #fff;
}
.googControls ul {
	margin: 3px 0 0 3px;
	padding-left:0;
	float:left;
	display:block;
	width:200px;
	list-style:none;
}
.googControls li {
	display:inline;
	margin: 0 10px 0 0;
}
.googPrint {
	float:right;
	text-align:right;
}
#googSearch {
	float:left;
	min-height:100px;
	width: 300px; /* should be the same width as googleDirections*/
	background-color:#000;
	margin-bottom: 2px;
	display:none; /* this is always the initial state */
	padding-top:0;
	border: solid thin #fff;
}		
#googSearch input {
	width: 175px;
	float:left;
	margin:8px 0 0 3px;
	fontSize:11px; 
	width:175px; 
	padding:0;
}
/* Get Directions  buttton */
.button {
	float:right; 
	margin: 8px 15px 3px 0;
	width:95px;
}
/* infoWindow display text */
p.infoWindowStreetAddress {
	color:#000; 
	font-size:11px;
}

When then use each style as options in the map interface. Remember to set the mode to manual (the default mode is ‘auto’):

?View Code JAVASCRIPT
$(document).ready(function(){
	$('#mapInfoManual').imGoogleMaps({
		address: '1230 Wilson St, Palo Alto, CA 94301, USA',
		map: 'googMap',
		directions: 'googDir',
		menu_class: 'googControls',
		print_class: 'googPrint',
		search: 'googSearch',
		button_class: 'button',
		mode: "manual"
	});	
});

imGoogleMaps 0.9

When I upgraded the plugin, I fixed a few minor bugs. I also added a few niceties:

  1. When getting directions, the user can press the enter key instead of having to click the ‘Get Directions’ button.
  2. Manual Mode Only: The ‘Get Directions’ menu items and Directions Div can be hidden by setting the show_directions_menu to false (true, by default). When setting this option, you not need the directions, search, and button_class options.
    ?View Code JAVASCRIPT
    $(document).ready(function(){
    	$('#mapInfoManual').imGoogleMaps({
    		address: '17th St NW & Independence Ave Washington, DC 20006',
    		map: 'googMap',
    		menu_class: 'googControls',
    		print_class: 'googPrint',
    		mode: 'manual',
    		show_directions_menu: false
    	});	
    });

Multiple Addresses

Plotting multiple addresses on a Google Map is one of the major upgrades of the plugin. The addresses can be loaded via ajax using the data_url option. Although a single address can be loaded as text (the default), to load multiple addresses on the map, the data format must be json (set the data_type option to ‘json’).

?View Code JAVASCRIPT
$(document).ready(function(){
	$('#mapInfoManual').imGoogleMaps({
		data_url: 'my_addresses.php',
		data_type: 'json',
		map: 'googMap',
		menu_class: 'googControls',
		print_class: 'googPrint',
		mode: 'manual',
		show_directions_menu: false
	});	
});
$json = '[';
$json .= '{"address": "Capitol Building, Washington, DC"},';
$json .= '{"address": "Constitution Ave NW & 15th St NW Washington, DC 20024"},';
$json .= '{"address": "17th St NW & Independence Ave Washington, DC 20006"},';
$json .= '{"address": "Lincoln Memorial Cir SW Washington, DC 20037"},';
$json .= '{"address": "Constitution Ave NW & Henry Bacon Dr NW Washington, DC 20001"}';
$json .= ']';
echo $json;

The json object can optionally be loaded via the address option of the plugin.

imProgressBar

I received an error when testing the plugin with more than 10 addresses. After some searching, I found that Geocode requests are limited to about 15000 per IP address per day (about 1 every 5.76 seconds). Because of the limitations, I added a new option to the imGoogleMaps plugin: geocode_request_rate

The default value for this option is 500 (0.5 secs). This will cause the plugin to make a Geocode requests once every 1/2 seconds. If you have more than about 10 addresses, you should set this rate at a higher value. In the demos, I set the rate to 5000 (5 secs).

Setting the request rate to a higher value causes the imGoogleMaps plugin to appear inactive to the user, so I incorporated the imProgessBar plugin into imGoogleMaps. To set this option, you must supply the progress bar container id , progress bar back class, and the progress bar class. The imProgressBar comes with a number of bar images for you to use (I’ll discuss the imProgressBar plugin in more detail in a later post).

Before using the imProgressBar, you mus first style it:

#imProgBarCntnr {
  	float:left;
  	width:200px;
  	height:20px;
}
.imBarBack {
	float:left;
	width:150px;
	height:18px;
	background-color:#d8d8d8;
}
.imProgBar {
	float:left;
	height:18px;
	background: url(improgressbar/images/bar_sky_blue.jpg) repeat-x;
}

Now, add the option to the plugin:

?View Code JAVASCRIPT
$(document).ready(function(){
	$('#mapInfoManual').imGoogleMaps({
		data_url: '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
	});	
});

Street View

Incorporating the GStreetviewPanorama into the plugin was probably the most time-consuming aspect of the upgrade. The Panorama itself was not difficult, but finding a way to switch back to the map. On Google Maps, Google added an ‘X’ on the top right of the Street View Panorama in order to allow the user to close the panorama and return to the map, but they have not provided developers a way to do the same thing. I finally found a way around it. Once Google gives developers access to the StreetPanorama, I will upgrade the plugin.

In order to display the StreetViewPanorama, you have to set two options:

  1. street_view – this option is the id of the div that will hold the GStreetviewPanorama. It is initially hidden. When the user clicks on the infoWindow of any given marker, a street view link will be displayed under the address.
  2. street_close_loc – this option is the location of the close button image that is used to exit street view (a button image is supplied with the plugin, but it can be changed).

The street_view div is styled the same as the map div. The only difference is the height of the street view div is a bit smaller to accommodate the height of the close button. Also, the id name of the close button container can’t be changed (but the styling can be).

#googMap, #street_view {
	  float:right;
	  width:650px;
	  height:400px;
	  border: solid thin #fff;
	  color:#000;
}
 
#street_view {
	/* height is map height - imStreetViewClose height*/
	height:382px;
	display:none;
}
 
/* holds the close button. id name can't be changed*/
#imStreetViewClose {
	float:right;
	width:650px;
	height:18px;
	text-align: right; 
	display: none;
	padding-right:3px;
}

Note: The plugin will know to include a StreetViewPanorama if the id for the street_view is supplied. When this option is supplied a custom Street View button will also be displayed on the map. When the button is clicked, the Street View Overlay will be applied to the map. I will create a later post that discusses how I created a custom control.

To display street view in the imGoogleMaps plugin:

?View Code JAVASCRIPT
$(document).ready(function(){
	$('#mapInfoManual').imGoogleMaps({
		data_url: 'streetview.php',
		data_type: 'json',
		map: 'googMap',
		menu_class: 'googControls',
		print_class: 'googPrint',
		mode: 'manual',
		show_directions_menu: false,
		street_view: 'street_view',
		street_close_loc: 'images/close_btn.gif'
	});	
});

An additional upgrade to the plugin is the ability to display a name (business name) above the address in the infoWindow. In order to display the name, a ‘name’ option should be added to the json object that is loaded via the data_url (or address option):

$json = '[';
$json .= '{"address": "1213 U St NW Washington, DC 20009", "name": "Ben\'s Chilli Bowl"},';
$json .= '{"address": "1100 Florida Ave NW Washington, DC 20009", "name": "Florida Avenue Grill"},';
$json .= '{"address": "50 Massachusetts Ave NE Washington, DC 20002", "name": "B Smith\'s"},';
$json .= '{"address": "1652 K St NW Washington, DC 20006", "name": "McCormick & Schmick\'s"},';
$json .= '{"address": "1801 Connecticut Avenue NW Washington, DC 20009", "name": "Ruth\'s Chris Steak House"}';
$json .= ']';
echo $json;

You can style the name in the infoWindow by setting the ‘span.imBusinessName’ class.

span.imBusinessName {
	color:#ff6600;
	font: bold 16px Helvitica, Arial, sans-serif;
}

The plugin can be downloaded from JQuery’s Plugin Repository or Google Code. You can view demos of the imGoogleMaps Plugin on the demo section of my site.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks