Easy Customizable jQuery Google Maps Plugin - googlemaps.js
File Size: | 25.8 KB |
---|---|
Views Total: | 6708 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery wrapper for Google Maps API that helps you quickly insert customizable Google Maps on the web page.
Features:
- Add markers to addresses on the map.
- Center map at address, geographical coordinates or marker.
- Draw polygon (point, range and route) on the map.
- Sort markers from closest to farest from destination marker.
- Set info window(s) at marker(s).
- Custom map styles.
Basic usage:
1. To get started, you need to include jQuery library and Google Maps JavaScript API on the web page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//maps.google.com/maps/api/js?sensor=false"></script>
2. Include the jQuery googlemaps.js plugin after jQuery JavaScript library.
<script src="googlemaps.js"></script>
3. Initialize the plugin and we're ready to go.
var map = $("#map").googlemaps();
4. Create a map marker using setMarker
method.
/** * setMarker(address, successCallback, errorCallback, options, image) * @param {String} address Real address or geographic position "lat, lng" to place marker on it * @param {function(Marker)} successCallback Function, which is called after geocoding address and put the marker * @param {function(string, string)} errorCallback Function, which is called after error (ex. unknown address); params: status, address * @param {Object} options Marker additional options (see google.maps.Marker at Google Maps API Documentation) * @param {String} image Url to image of marker's icon * @return {Object} Map plugin itself */ var map = $("#map").googlemaps(); map.setMarker("Wroclaw, Poland", undefined, function() { alert('Can't find!'); }, { visible : false }); map.setMarker("52, 20");
5. Create map marks at multiple addresses.
/** * setMarkersAtAddresses(addresses, successCallback, errorCallback, options, images, putMarkerCallback) * @param {Array<String>} addresses Array of real addresses or geographic positions "lat, lng" to place marker on it * @param {function(Array<Marker>)} successCallback Function, which is called after put all markers on the map * @param {function(string, string)} errorCallback Function, which is called after error (ex. unknown address); params: status, address * @param {Object} options Marker additional options (see google.maps.Marker at Google Maps API Documentation) * @param {String} image Url to image of marker's icon * @param {function(Marker, string)} putMarkerCallback Function, which is called after geocoding address and put the marker; params: marker, address * @return {Object} Map plugin itself */ $("#map").googlemaps().setMarkersAtAddresses([ "Polska", "Niemcy", "Holandia", "Ukraina", "Rosja" ]);
6. Center map at addresses, geographical coordinates or markers.
/** * setCenter(address, zoom, successCallback, errorCallback, geocoderoptions) * @param {String, Marker, Array<Marker>} address Real address, geographical coordinates (string: "lat, lng"), marker or array of markers to center the map on it * @param {Integer} zoom Zoom multiplier * @param {function(position:LatLng)} successCallback Function, which is called after find address, center and zoom * @param {function(status:String, address:String)} errorCallback Function, which is called after error with finding address * @param {Object} Object with additional options of geocoder * @return {Object} Map plugin itself */ var map = $("#map").googlemaps(); map.setMarkerAtAddress("Grabiszyńska 241, Wrocław, Polska", function(marker) { map.setCenter(marker, 16); });
7. Draw a polygon on the map.
/** * setPolygon(points, options) * @param {Array<Marker,String>} points Array of markers or/and geographical positions "lat, lng" or verticles of polygon * @param {Object} options Polygon options (see google.maps.PolygonOptions at Google Maps API Documentation) * @return {Polygon} google.maps.Polygon */ 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] ]); }); });
8. Sort markers.
/** * getDistances(fromMarker, markers, callback, precisly, options) * @param {Marker} fromMarker Destination marker * @param {Array<Marker>} markers Array of markers to sort * @param {function(markers:Array<Object>,status:String)} callback 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) * @param {Integer} precisly If is positive, it's number of nearest points (by air), which will be checked by google maps service; workaround for google maps limitations * @param {Object} options Distance Matrix options, see google.maps.DistanceMatrixOptions at Google Maps API Documentation */
9. Create an info window.
/** * setInfoWindowAtMarker(marker, info, options, name) * @param {Marker} marker Marker for info window * @param {String} info HTML content to show in info window * @param {Object} options Info window options (see google.maps.InfoWindowOptions at Google Maps API Documentation) * @param {String} name Unused at this moment; it should pick right info window from array, when it exists * @return {InfoWindow} google.maps.InfoWindow (see Google Maps API Documentation) */
10. Create an info window on click.
/** * setInfoWindowAtMarkerOnClick(marker, info, options, closeOthers) * @param {Marker} marker Marker for info window * @param {String} info HTML content to show in info window * @param {Object} options Info window options (see google.maps.InfoWindowOptions at Google Maps API Documentation) * @param {Boolean} closeOthers Close all opened info windows before show this one * @return {InfoWindow} google.maps.InfoWindow (see Google Maps API Documentation) */
11. Bind click event to marker.
/** * setMarkerClick(marker, click) * @param {Marker} marker Marker object (get from addMarker) * @param {function(this:Marker)} click Function, which is called on click at marker */ var map = $("#map").googlemaps(); map.setMarker("Wroclaw, Polska", function(marker) { map.setMarkerClick(marker, function() { alert('Marker clicked!'); }); });
12. Change styles of the Google map.
/** * setStyles(styles) * @param {Array<Object>} styles Array of objects with Google Maps styles notation * @description * Use wizard: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html */ map.setStyle([ { "stylers": [ { "gamma": 0.38 } ] } ]);
This awesome jQuery plugin is developed by piwko28. For more Advanced Usages, please check the demo page or visit the official website.