Google Maps wrapper

Usage no npm install needed!

<script type="module">
  import wearejustGmaps from 'https://cdn.skypack.dev/@wearejust/gmaps';



Turns an element into Google Maps.


npm install @wearejust/gmaps

yarn add @wearejust/gmaps


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

// Remove only listeners
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


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


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