Google Maps Plugin

Google Maps plugin is an easy way to implement Google Map onto any web page. Dynamically creates the javascript version that carries over many of the different features that the Google Maps API offers.

How to use it

Attach the googleMaps to an element.

$(element).googleMaps();

Plugin options

Name	Type	Default	Description
address	string	empty	pass single or multiple address. spilt multiple address with ';'
addressElem	string	empty	use to select the address element
mapHeight	number	100%	map canvas height
mapWidth	number	100%	map canvas width
disableUI	boolean	1	enables/disables default google map ui
streetView	boolean	0	enables/disables street view control on map
draggable	boolean	0	enables/disables map to be draggable
mapControl	boolean	0	enables/disables upper right hand corner control on map
zoom	number	12	number lower zoom. higher number zoom
disableClickZoom	boolean	1	enables/disables zoom and center on double click
scrollwheel	boolean	0	enables/disables zoom with scrollwheel
mapType	string	"ROADMAP"	map type to render. 'ROADMAP','TERRAIN','SATELLITE','HYBRID'
markerShow	boolean	1	show/hide map marker
markerClickable	boolean	1	allow marker to be clickable
markerIcon	string	null	add custom icon image for marker base on img url
markerAnimation	string	"NONE"	animations that can be played on a marker. 'NONE', 'BOUNCE', 'DROP'
infoContent	string	empty	create an info window with the given content
fitBounds	boolean	0	adjust map zoom to fit all markers into map viewport
mapStatic	boolean	0	embed a static google map image. if true map height and width needs to be define
staticScale	number	1	scale (zoom) the image to improve legibility
routeShow	boolean	0	enables/disables map routes
routeType	string	"DRIVING"	route travel type. 'DRIVING','WALKING','BICYCLING','TRANSIT'
routePanel	string	".route-panel"	select element to use as directions panel to display route info
routeStart	string	".route-start"	route starting point
routeEnd	string	".route-end"	route ending point
routeSubmit	string	".route-submit"	element use to submit route
routeType	string	"DRIVING"	route travel type. 'DRIVING','WALKING','BICYCLING','TRANSIT'
routeUnits	string	"METRIC"	specifies route distance in units 'IMPERIAL' or 'METRIC'
autoComplete	string	"start"	bind google map auto complete to input element 'start' || 'end' || 'both'
textRoute	boolean	0	route text html only
textStart	string	".text-start"	route text html starting point
textEnd	string	".text-end"	route text html ending point
textPanel	string	".text-panel"	select element to use as directions panel to display route text
autoComplete	string	"start"	bind google map auto complete to input element 'start' || 'end' || 'both'
geolocation	boolean	1	use browser geolocation lookup if google clientlocation null

For the boolean option above use 0 or 1 instead of false or true.

Plugin options taken to the next level

All options above are configurable with HTML5 data attribute. This is a significantly cleaner solution (as long as you don’t mind the inline approach).

You can use the standard approach.

$(element1).googleMaps();
$(element2).googleMaps({mapStatic: 0, address: 'foo; bar'});
$(element3).googleMaps({mapHeight: 100, mapWidth: 100});

or

HTML5 data approach.

data-plugin-options='{"mapStatic":0,"address":"foo; bar"}'
data-plugin-options='{"mapHeight":100,"mapWidth":100}'
$(element).googleMaps(); // init the plugin once

Plugin callback methods

This plugin has four callback.

$(element).googleMaps({
  mapStart: function() {
    // do stuff here
  },
  mapComplete: function() {
    // do stuff here
  },
  mapClick: function() {
    // do stuff here
  },
  markerClick: function() {
    // do stuff here
  },
  routeComplete: function() {
    // do stuff here
  }
});

Plugin public method

This plugin has five public method. These methods can be called from inside or outside this plugin.

From outside

$(element).data('googleMaps').method(arg1, arg2, ... argn);

From inside

plugin.method(arg1, arg2, ... argn);

Public methods

Name	Argument	Description
iconMarker	(index, image source)	update marker icon based on its index with a new icon image source.
deleteMarker	(index)	remove a marker based on its index
clearMarker	none	remove all marker
addMarker	(latlng, index, address, icon source, marker clickable, marker animation)	add a single marker. LatLng will need to be formatted according to google api (new google.maps.LatLng(latitude, longitude). For other argument options, refer to plugin options