gmaps-marker

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