@deleteagency/google-maps NPM

Google Maps

A wrapper around Google Maps JavaScript API which supports custom popups out of the box and simplify common tasks. Live Demo

Installation

Use the package manager npm for installation.

$ npm install @deleteagency/google-maps

Usage

import { GoogleMaps } from  '@deleteagency/google-maps';

const map = new GoogleMap(
    document.getElementById('map1'),
    // google.maps.MapOptions (https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions)
    {
        zoom: 11,
        maxZoom: 19,
        minZoom: 1,
    },
    // custom options (see bellow)
    {
        fitPaddings: {
            top: 10,
            bottom: 10,
            left: 10,
            right: 10,
        }
    }
);

// an array of google.maps.MarkerOptions https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions
// in case they contain additional option popupElement, this element will be used as a popup
map.setMarkers([
    {
        position: {
            lat: 51.507100,
            lng: -0.122758,
        },
        popupElement: document.getElementById('popup1')
    },
    {
        position: {
            lat: 51.507400,
            lng: -0.127758,
        },
        popupElement: document.getElementById('popup2')
    }
]);
map.setPolygons([
    {
        paths: [{lat: 51.458, lng:-0.08677}, {lat: 51.45703, lng:-0.1087},  {lat:51.45282, lng:-0.0922}, {lat: 51.45324, lng:-0.0918},  {lat:51.45343, lng:-0.0903 }, {lat: 51.456, lng:-0.08767}, {lat: 51.458, lng:-0.08677}],
        strokeColor: '#0033ff',
        strokeOpacity: 0.3,
        strokeWeight: 4,
        fillColor: '#0033ff',
        fillOpacity: 0.1,
    }
]);
map.render();

Options

The full list of native google.maps.MapOptions can be found here and can be passed as the second argument: new GoogleMap(element, mapOptions, options) Below you can find options for GoogleMap itself (these are passed to the GoogleMap constructor as the third argument - new GoogleMap(element, mapOptions, options))

createMarker

Type: Function Default: null

If provided this function should return an instance of GoogleMarker class. It is called with the following arguments: ({id, map, mapInstance, config, options}) => { ... } See GoogleMarker API

initPromise

Type: Function Default: null

autoFitOnRender

Type: boolean Default: true

autoFitPopup

Type: boolean Default: true

deactivateMarkerOnMapClick

Type: boolean Default: true

getPopupContent

Type: Function Default: null

See examples

fitPaddings

Type: Object Default: {top: 0, bottom: 0, left: 0, right: 0}

fitPopupPaddings

Type: Object Default: {top: 0, bottom: 0, left: 0, right: 0}

GoogleMap API

new GoogleMap(element ,mapOptions = {}, options = {})

Returns new GoogleMap instance

element

Required Type: HTMLElement

An element which holds the map

mapOptions (see here)

Optional Type: google.maps.MapOptions

options

Optional Type: Object

map.render()

Renders the map itself and other objects (markers, polylines, polygons)

Note: Just creating an instance doesn't render anything, you have to implicitly call its render method to render initial map or reflect a changes after map.setMarkers/setPolylines/setPolygons is called

map.setMarkers(markers)

Save markers to render them once render() method is called

markers

Required Type: google.maps.MarkerOptions[]

An array of objects which are inherited from google.maps.MarkerOptions If you want a particular marker to show a popup you can extend its options object with popupElement property. It should contain an HTMLElement which will be used as the content of the popup Also you can identify every marker by passing additional property id. id is used in order to avoid redundant destroying and creating markers instance when setMarkers(...) + render() are called multiple times but some of the provided markers are already rendered. id is optional because by default it uses the whole marker config object as a key. But if you already have identifiers in you markers or going to call map.getMarkersById() later and interact with markers directly it makes sense to use your own id value.

map.setPolylines(polylines)

Save polylines configs to render them once render() method is called

polylines

Required Type: google.maps.PolylineOptions[]

An array of objects which are inherited from google.maps.PolylineOptions Uses the same idea with id as markers

map.setPolygons(polygons)

Save polygons configs to render them once render() method is called

polygons

Required Type: google.maps.PolygonOptions[]

An array of objects which are inherited from google.maps.PolygonOptions Uses the same idea with id as markers

map.getInstance()

Returns Promise<google.maps.Map>

map.fitDrawings()

Fits previously rendered objects (markers, polylines, polygons) within the map

map.getMarkersCount()

Returns integer

Return the quantity of the rendered markers

map.getPolylinesCount()

Returns integer

Return the quantity of the rendered polylines

map.getPolygonsCount()

Returns integer

Return the quantity of the rendered polygons

map.getMarkerById(id)

Returns GoogleMarker

Return an instance of the rendered GoogleMarker by the provided id

id

Required Type: (string|Object)

The id of the marker. Read about it (here)#markers

map.getPolylineById(id)

Returns GooglePolyline

Return an instance of the rendered GooglePolyline by the provided id

id

Required Type: (string|Object)

The id of the polyline. Read about it (here)#markers

map.getPolygonById(id)

Returns GooglePolygon

Return an instance of the rendered GooglePolygon by the provided id

id

Required Type: (string|Object)

The id of the polygon. Read about it (here)#markers

GoogleMarker API

new GoogleMarker({id, map, mapInstance, config, options})

You don't need to create GoogleMarker instances manually until you want to use custom markers classes with (createMarker)#createmarker

googleMarker.getInstance()

Returns google.maps.Marker

googleMarker.setPopupElement(element)

element

An element which should be used as the content of the popup

Required Type: HTMLElement

googleMarker.activate()

Activates the marker. Note that activate is not just about showing the popup, for example you can change the icon of the marker when its state is changed but not show any popup above it