gmaps-marker v1.0.8

Google Maps Marker

A light and simple library to display Google Maps with a custom marker. This marker is clickable and display the text you want in an Info window.

Getting started

$ npm install --save gmaps-marker

const gmapMarker = require('gmaps-marker')
gmapMarker.init(domElement, params)

Don't forget to add this google script tag with your own API key before all your scripts

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=XXX"></script>

Parameters via javascript or data

You can pass parameters via javascript or via html data attributes. It can be helpfull.

Settings

Example with jascript method

HTML :

The content of your dom element will be included in the marker info window.

<div id="gmap"><h2>Info window content</h2><span>You can put what you want here !</span></div>

JAVASCRIPT :

Here, we define the marker position with center. The style of the map is some JSON that you can get on websites like this. The info object define that the info window will be opened on init.

gmapMarker.init('#gmap', {
    center: {
        lat: 45, 
        lng: 2.5
    },
    style: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}],
    zoom: 8,
    info: {
        opened: true
    }
});