WHQ Google Map

Wrapper for embedding a Google Map more easily.

Installation

npm install whq-google-map

Usage

import GoogleMap from 'whq-google-map'

// new GoogleMap(options)

const mapCanvas = document.querySelector('.map-canvas')
const mapMarkers = [
    {
        coords: { lat: 100, lng: -100 },
        title: 'Location #1' <-- Optional
    },
    {
        coords: { lat: 100, lng: -100 },
        title: 'Location #2' <-- Optional
    },
    ...
]
const mapStyles = [...]

const myMap = new GoogleMap({
    apiKey: 'YOUR_API_KEY',
    element: mapCanvas,
    initialCoords: { lat: 100, lng: -100 },
    zoom: 12,
    markerIcon: 'img/map-marker.png',
    markers: mapMarkers,
    markerClick: {
        enabled: true,
        zoom: 9,
        centerOnMarker: true,
        bindSelector: '.element-to-bind',
        boundElementContainer: '.container',
        activeClass: 'active'
    },
    styles: mapStyles
})

myMap.init()

Options

Option	Type	Description
apiKey	String	Your Google Maps API key.
coords	String	Object with lat and long properties.
element	Node	The map canvas element.
markerIcon	String	Optional. Path to a custom marker icon. PNGs work the best cross-browser.
markers	String	Optional. Node list of markers.
markerClick	String	Optional. Options for marker click events.
styles	Array	Optional. Array of custom styles.
zoom	Integer	Optional. Custom zoom level. Default: 4

Marker Click Options

Option	Type	Description
enabled	Boolean	Optional. Whether or not marker click events are enabled. Default: False
zoom	Integer	Optional. Zoom level after marker click. Default: False
centerOnMarker	Boolean	Optional. Whether or not to center the map on a marker when it is clicked. Default: True
bindSelector	String	Optional. An element selector to bind each marker to.
boundElementContainer	String	Optional. Selector of the element that contains the bound elements. This is required to scroll to the bound element.
activeClass	String	Optional. Class to add to the bound element when its corresponding marker is clicked. Default: active

Binding Elements

To get bound elements to work, you must add the data-title attribute to the DOM node that corresponds to the title of each marker.

<li class="bound-element" data-title="Location #1">Location #1</li>

Icon Override

Override the global icon option by adding the data-icon attribute to the markers data.

const mapMarkers = [
    {
        coords: { lat: 100, lng: -100 },
        title: 'Location #1',
        icon: '/path/to/custom-icon.png'
    },
    ...
]