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'
    },
    ...
]