GrassHopperPebbles.com Demos

JQuery Plugins

imGoogleMaps - Version 1.0

Version 1 of the plugin is a bit different from the previous versions:

  • Auto mode has been removed so the mode option is no longer needed.
  • Added Zoom Level (zoom_level).
    zoom_level: '5'
  • 'json' is now the default data_type option (previously, 'text' was the default option).
  • Now street view button (displays blue lines on map) is a separate option from street view link that displays in info window. The option to display the street view button: show_streetview_button. The default is false.
  • Removed top control bar, so the following options are no longer needed: menu_bar, search, print_class, menu_class, button_class).
  • Changed classes: imBusinessName to infoWindowBusinessName and imDescription to infoWindowDescription
  • directions and show_directions_menu options has been removed.
    • Direction search can now be displayed in the info window (option: show_directions. Default: true).
    • Directions will now be displayed in a popup
    • Added directions instructions option. Location options: 'top' or 'bottom'.
      instructions: {'container': 'googInstruct', 'label': 'Click on the marker to get directions', 'location': 'top'}
  • Added url to info window.
    • *Added class: infoWindowUrl
      
      < a href="http://grasshopperpebbles.com" target="_blank" class="infoWindowUrl">www.grasshopperpebbles.com< /a>
      
      
    • **Added show_infowindow_url option. If true (the default), url will display in the info window (if exists).
      If false, the url link will be added to the business name.
* The info window url can be styled separately:

a.infoWindowUrl {
	color: blue;
	font-size: 12px;	
} 

If it is not styled separately, the url will take the styling of the global a tag:

#googMap a {
	color:#0000ff;
	text-decoration:none;
}
a.infoWindowUrl {
		
}

** When show_infowindow_url is false, the a tag will be the child of infoWindowBusinessName:

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

The following is the json record that is being returned for this demo:

[{"address": "1213 U St NW Washington, DC 20009", "name": "Ben\'s Chilli Bowl", "phone": "202-234-2343", "desc": "The Best Chilly in Town!", "url": "http://www.benschilibowl.com",
	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"}]},
{"address": "1100 Florida Ave NW Washington, DC 20009", "name": "Florida Avenue Grill", "phone": "202-243-2333", "desc": "The Best Grill in Town!", "url": "http://floridaavenuegrill.com", 
	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"}]},
{"address": "50 Massachusetts Ave NE Washington, DC 20002", "name": "B Smith\'s", "phone": "202-244-2444", "desc": "The Best Smith in Town!", "url": "http://www.bsmith.com",
	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"}]},
{"address": "1652 K St NW Washington, DC 20006", "name": "McCormick & Schmick\'s", "phone": "202-222-2222", "desc": "The Best McCormick in Town!", "url": "http://www.mccormickandschmicks.com",
	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"}]},
{"address": "1801 Connecticut Avenue NW Washington, DC 20009", "name": "Ruth\'s Chris Steak House", "phone": "202-111-1111", "desc": "The Best Steak in Town!", "url": "http://www.ruthschris.com",
	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"}]}]
			

View the source code for this page to see how to set up the imGoogleMaps plugin. For documentation on the plugin, see my original post: imGoogleMaps and the imGooglMaps - 0.9 post that discusses multiple addresses and street view options, and imGooglMaps - 0.9.2 post that discusses Custom Markers.

Tags

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