jQuery GoogleMaps Plugin
Easier way to quickly create google map with jQuery
Put in head:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
and this file.
Use:
var map = $("#mapcontainer") .css({ width : '300px', height : '300px' }) .googlemaps(); var marker = map.setMarkerAtAddress('Wroclaw'); map.setCenterAtMarker(marker, 5);
It means: Center and put a marker on WrocΕaw and zoom it to 5.
See example directory for more.
Documentation
Properties
markers
Array of all placed markers
infowindows
Array of all infowindows
map
Map object (see more at Google Maps API v3)
Methods
setMarker(address, successCallback, errorCallback, options, image)
Place marker at real address on the map
- Parameters:
address
βString
β Real address or geographic position "lat, lng" to place marker on itsuccessCallback
βfunction(Marker)
β Function, which is called after geocoding address and put the marker{function(string,
β errorCallback Function, which is called after error (ex. unknown address); params: status, addressoptions
βObject
β Marker additional options (see google.maps.Marker at Google Maps API Documentation)image
βString
β Url to image of marker's icon
- Returns:
Object
β Map plugin itself - Example:
var map = $("#map").googlemaps(); map.setMarker( "Wroclaw, Poland", undefined, function() { alert('Can't find!'); }, { visible : false } ); map.setMarker("52, 20");
setMarkersAtAddresses(addresses, successCallback, errorCallback, options, images, putMarkerCallback)
Place many markers at real addresses
- Parameters:
addresses
βArray<String>
β Array of real addresses or geographic positions "lat, lng" to place marker on itsuccessCallback
βfunction(Array<Marker>)
β Function, which is called after put all markers on the map{function(string,
β errorCallback Function, which is called after error (ex. unknown address); params: status, addressoptions
βObject
β Marker additional options (see google.maps.Marker at Google Maps API Documentation)image
βString
β Url to image of marker's icon{function(Marker,
β putMarkerCallback Function, which is called after geocoding address and put the marker; params: marker, address
- Returns:
Object
β Map plugin itself - Example:
$("#map").googlemaps().setMarkersAtAddresses([ "Polska", "Niemcy", "Holandia", "Ukraina", "Rosja" ]);
setCenter(address, zoom, successCallback, errorCallback, geocoderoptions)
Center map at real address, geographical coordinates or marker
- Parameters:
{String,
β Array} address Real address, geographical coordinates (string: "lat, lng"), marker or array of markers to center the map on itzoom
βInteger
β Zoom multipliersuccessCallback
βfunction(position:LatLng)
β Function, which is called after find address, center and zoom{function(status:String,
β errorCallback Function, which is called after error with finding addressObject
βObject
β with additional options of geocoder
- Returns:
Object
β Map plugin itself - Example:
var map = $("#map").googlemaps(); map.setMarkerAtAddress( "GrabiszyΕska 241, WrocΕaw, Polska", function(marker) { map.setCenter(marker, 16); } );
setRoute(from, to, name, successCallback, errorCallback, options, rendererOptions)
Draw route between two markers on the map.
- Parameters:
from
βMarker
β From markerto
βMarker
β Destination markersuccessCallback
βFunction
β callback on successerrorCallback
βFunction
β Callback on erroroptions
βObject
β request options (see: maps api)rendererOptions
βObject
β Renderer optins (see: maps api)
- Example:
var map = $("#map").googlemaps(); map.setMarker( "Wroclaw, Poland", function(from) { map.setMarker( "Warszawa, Poland", function(to) { map.setRoute(from, to, "route1"); } ); } );
setPolygon(points, options)
Draw polygon on the maps. Default is red stroke and red fill
- Parameters:
points
βArray<Marker,String>
β Array of markers or/and geographical positions "lat, lng" or verticles of polygonoptions
βObject
β Polygon options (see google.maps.PolygonOptions at Google Maps API Documentation)
- Returns:
Polygon
β google.maps.Polygon - Example:
var map = $("#map").googlemaps(); map.setCenter("Polska", 6, function() { map.setMarkersAtAddresses( [ "Warszawa", "KrakΓ³w", "WrocΕaw" ], function(markers) { map.setPolygon([ markers[0], markers[1], markers[2], "51, 19", markers[0] ]); } ); });
getDistances(fromMarker, markers, callback, precisly, options)
Sort markers from closest to farest from destination marker
- Parameters:
fromMarker
βMarker
β Destination markermarkers
βArray<Marker>
β Array of markers to sortcallback
βfunction(markers:Array<Object>,status:String)
β Returns sorted objects (by distance in kilometers) with fields: marker:Marker, distance:Float, airDistance:Float (by plane, optional), routeDistance:Float (by car, optional), duration:Float (by car in minutes, optional), precisly:Boolean (if checked by google maps)precisly
βInteger
β If is positive, it's number of nearest points (by air), which will be checked by google maps service; workaround for google maps limitationsoptions
βObject
β Distance Matrix options, see google.maps.DistanceMatrixOptions at Google Maps API Documentation
setInfoWindowAtMarker(marker, info, options, name)
Set info window at marker
- Parameters:
marker
βMarker
β Marker for info windowinfo
βString
β HTML content to show in info windowoptions
βObject
β Info window options (see google.maps.InfoWindowOptions at Google Maps API Documentation)name
βString
β Unused at this moment; it should pick right info window from array, when it exists
- Returns:
InfoWindow
β google.maps.InfoWindow (see Google Maps API Documentation)
setInfoWindowAtMarkerOnClick(marker, info, options, closeOthers)
Set info window at marker on click event at the marker
- Parameters:
marker
βMarker
β Marker for info windowinfo
βString
β HTML content to show in info windowoptions
βObject
β Info window options (see google.maps.InfoWindowOptions at Google Maps API Documentation)closeOthers
βBoolean
β Close all opened info windows before show this one
- Returns:
InfoWindow
β google.maps.InfoWindow (see Google Maps API Documentation)
closeAllInfoWindows()
Close all opened info windows
setMarkerClick(marker, click)
Bind click event to marker
- Parameters:
marker
βMarker
β Marker object (get from addMarker)click
βfunction(this:Marker)
β Function, which is called on click at marker
- Example:
var map = $("#map").googlemaps(); map.setMarker( "Wroclaw, Polska", function(marker) { map.setMarkerClick(marker, function() { alert('Marker clicked!'); }); } );
setStyles(styles)
Change styles of map (ex. colors) Use wizard: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
- Parameters:
styles
βArray<Object>
β Array of objects with Google Maps styles notation - Example:
map.setStyle([ { "stylers": [ { "gamma": 0.38 } ] } ]);