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

| Parameter | type | default | description | data | | --- | --- | --- | --- | --- | | center : lat | int | 0 | Latitude of the marker | data-lat | | center : lng | int | 0 | Longitude of the marker | data-lng | | style | json | '' | Style of your Google Map, you can get it on websites like this | No data | | zoom | int | 10 | Zoom level | data-zoom | | icon | string | '' | URL of your custom marker | data-icon | | info : content | string | '' | Content of the info window | No data : Write content in the dom element | | info : opened | boolean | false | Info window opened by default or not | data-opened |

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
    }
});