Easy Customizable jQuery Google Maps Plugin - googlemaps.js

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.