GrassHopperPebbles.com Demos

JQuery Plugins

imGoogleMaps 0.9 - Street View

In this example, I have set up the plugin to display street view and a street view control. In order to active the street view, you must supply the id of the container in the street_view option. You must also supply a value for the street_close_loc option. This is the location of the close button that is used to exit street view. Once you open the infoWindow of a marker, a street view link will be displayed under the address

This example also displays multiple addresses. I have also hidden the directions menu by setting the option: show_directions_menu: false. This setting can only be made in manual mode. The directions, search, and button_class options for the plugin are not needed when the show_directions_menu is set to false.

I am loading the addresses ajaxally using the data_url option. I'm loading a json object from a php file. I am also loading an optional name, phone, and desc for each record. This name will appear in the infoWindow that is displayed when the user clicks on the marker. The name can be styled using the span.imBusinessName class. The desc can be styled using the span.imDescription class.

$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;
 

span.imBusinessName {
	color:#ff6600;
	font: bold 16px Helvitica, Arial, sans-serif;
}
span.imDescription {
	color:#6699CC;
	font: bold 11px Helvitica, Arial, sans-serif;
	font-style:italic;
}

New***
New in version 0.9.3: You can display images in the infoWindow. You must supply the image_loc, width, and height. You can optionally add a class_name, url, and new_line. The new_line option is used when you have multiple images in the infoWindow and you want each image to appear on a line of it's own. So the image that appears after the record with the new_line option will be pushed to the next line.

$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!", 
			images: [{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/bens_chili_bowl.jpg", width: "150", height: "137", new_line: true},
					{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/bens_chili_bowl2.jpg", width: "150", height: "119"}]},';
$json .= '{"address": "1100 Florida Ave NW Washington, DC 20009", "name": "Florida Avenue Grill", "phone": "202-243-2333", "desc": "The Best Grill in Town!", 
			images: [{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/florida_grill1.jpg", width: "150", height: "113", class_name: "theClass"},
					{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/florida_grill2.jpg", width: "150", height: "113", class_name: "theClass"}]},';
$json .= '{"address": "50 Massachusetts Ave NE Washington, DC 20002", "name": "B Smith\'s", "phone": "202-244-2444", "desc": "The Best Smith in Town!",
			images: [{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/bsmith.jpg", width: "150", height: "113", new_line: true},
					{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/bsmith1.jpg", width: "150", height: "119"}]},';
$json .= '{"address": "1652 K St NW Washington, DC 20006", "name": "McCormick & Schmick\'s", "phone": "202-222-2222", "desc": "The Best McCormick in Town!",
			images: [{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/ms1.jpg", width: "150", height: "113", url: "http://www.mccormickandschmicks.com/"},
					{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/ms2.jpg", width: "150", height: "113"}]},';
$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!",
			images: [{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/ruthchris1.jpg", width: "150", height: "150", new_line: true},
					{image_loc: "http://grasshopperpebbles.com/demos/assets/images/googlemaps/ruthchris2.jpg", width: "150", height: "117"}]}';
$json .= ']';
echo $json;

I can optionally load the json object from the address option of the plugin

Note: When using the data_url option, the data_type option must be set to 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: imGoogleMaps and the imGooglMaps - 0.9 post that discusses multiple addresses and street view options.

Tags

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