GMaps

Turns an element into Google Maps.

Installation

npm install @wearejust/gmaps

yarn add @wearejust/gmaps

Usage

const GMaps = require('@wearejust/gmaps');

// Turn element into Google Maps
let gmaps = new GMaps(element, options, mapOptions, callback);

// Or use jQuery
$('.gmaps').gmaps(options, mapOptions, callback);

// Remove element
gmaps.destroy();

// Remove only listeners
gmaps.destroy(false);

Parameter	Value	Default	Description
element	DOM, string, object	.gmaps	Can be DOM element, selector string or jQuery object
options	object	null	See Options below
mapOptions	object	null	See Map Options below
callback	function	null	Callback when GMaps is initialized

See examples folder for more details

Options

Key	Value	Default	Description
apiKey	string	null	Your Google Maps API key
cluster	boolean, object	null	Enable Marker Clustering. See used package repository for options.
fit	boolean	true	Fit all markers on screen
fitZoom	integer	-1	Amount to zoom extra after fit
fitZoomMin	integer	0	Minimum zoom after fitZoom
fitZoomMax	integer	20	Maximum zoom after fitZoom
infowindow	object	null	Object with custom infowindow options. Use the default key to apply as default.
markers	object	null	Object with keys of custom marker options. Use the default key to apply as default.
markerEmptyZoom	integer, string	'3'	Amount to zoom in on clicked empty markers. Use integer for fixed level, string to add/subtract current level.
search	DOM, string, object	null	Search input field to find places on the map
spread	integer	0	Amount to spread markers with the same location

Map Options

Default Google Maps MapOptions. For more see https://developers.google.com/maps/documentation/javascript/reference#MapOptions

Key	Default
mapTypeControl	false
streetViewControl	false
zoom	17

Events

The jQuery element can have events bound to it.

let gmaps = $('.gmaps').gmaps(options, mapOptions, callback);

gmaps.on('ready', function(e, g) {
  // e is the event
  // g refers to the GMaps object
});

Event	Description
content_close	After closing the Content of a Marker
content_open	After opening the Content of a Marker
destroy	After destroy() is called
marker_close	After closing a Marker
marker_highlight	After tabbing through Markers
marker_mouseout	After hovering out a Marker
marker_mouseover	After hovering over a Marker
marker_open	After opening a Marker
overlay_add	After adding the custom Overlay of a Marker to the map
overlay_draw	After drawing the custom Overlay of a Marker in the map
overlay_remove	After removing the custom Overlay of a Marker from the map
ready	After initialization
search	After searching
zoom	After zooming in or out