Simple layer over Google Maps API to create expandable baloons(infoboxes) on the map. See example. We are tired of google maps syntax, infobox and whatever. Simple and straightforward syntax to do common job like this:
Installation
$ npm install --save easygooglemaps
Usage
Webpack
var EasyGoogleMaps = ;// run module here
example.html):
Old school files way (
Running
var MyMap = _options_;// options reference in next section MyMap;
Parameters (options)
// map options map: APIKEY: 'YOUR_GOOGLEMAPS_API_KEY' container: '.js-map' // DOM element, where to put map options: center: lat: -34097 lng: 150644 zoom: 8 // baloon specific options infobox: class: 'awesome-infobox' template: '#infobox' // html template for baloon closeButton: '.js-infobox-close' onlyOneBox: true // single baloon visible // baloon relative to marker position position: x: "left" y: "center" // Array of data (markers,baloons,infoboxes,whatever) to put on the map // Might be added at any time by .add method described below markers: items: "content": // this is {{=baloon.title}} in html template "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur." "marker": "position": "lat": -34397 "lng": 150644 "icon": "default": "img/markerDefault.png" "active": "img/markerActive.png" // for retina icon should be 40x60 pixels "size": "x": 20 "y": 30 "centering": "x": 10 "y": 30
And also HTML template (doT template engine) for infobox should be specified:
Methods
Load (callback)
MyMap;
Add marker
// this method also accepts array of markersMyMap;
Show-Hide by id
MyMap; // shows all markers (one or many) with id equal 2MyMap; // same, but hides
Google Map Object
Though our script wraps most of the use cases with map and infoboxes. You can still do whatever you want, because you have access to original Google Maps API:
MyMaprealmap; // returns Google Maps map object
Development
npm run build
- Build task that generates both minified and non-minified scripts,npm run watch
- watch changes, build only minified version;
Authors:
Valentin ‘Whats0n’ Dorosh
Yuri akella Artiukh
License
MIT © Coderiver