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 |