An ember-cli add-on for easy integration with Google Maps.
Each object displayed on map is inserted via child component,
so you can easily declare which marker and when to display on map
using {{#if}}
and {{#each}}
on template level.
ember install ember-g-map
You must define the size of the canvas in which the map is displayed. Simply add something similar to this to your styles:
.g-map-canvas {
width: 600px;
height: 400px;
}
In config/environment.js
you can specify additional Google Maps libraries
to be loaded along with this add-on (check the full list here),
optional API key for your application (additional info could be found here) and optional explicit protocol setting.
ENV['g-map'] = {
libraries: ['places', 'geometry'],
key: 'your-unique-google-map-api-key',
protocol: 'https'
}
Any custom options
(except for center
and zoom
to avoid conflicts) could be set for
Google Map object on creation and updated on change.
Mandatory context
attribute ties child-elements
with the main g-map
component. You can also set optional attributes:
- simple title appearing on hover using
title
attribute, - marker label using
label
, onClick
action to track allclick
events on that marker.
These Info Windows will be open right after component is rendered
and will be closed forever after user closes them. You can specify
optional onClose
action to tear down anything you need when Info Window
has been closed by user.
Available options (see details in docs):
- disableAutoPan,
- maxWidth,
- pixelOffset
markersFitMode
attribute overrides lat
, lng
, zoom
settings.
markersFitMode
value can be one of:
- 'init' - which will make the map fit the markers on creation.
- 'live' - which will keep the map keep fitting the markers as they are added, removed or moved.
Markers can have bound Info Windows activated on click.
To properly bind Info Window with Marker you should call g-map-marker
in block form and set context of Info Window to the one provided by Marker.
You can optionally setup custom openOn
/closeOn
events for each Info Window,
available options are: click
, dblclick
, rightclick
, mouseover
, mouseout
.
By default openOn
is set to click
and closeOn
is set to null
. When openOn
and closeOn
are the same, Info Window visibility is being toggled by this event.
Additionally you can specify parameter group
which ensures that only
one Info Window is open at each moment for Markers of each group.
Proxy g-map-address-marker
component takes address string as parameter
and translates it to lat/lng under the hood.
Optional onLocationChange
action hook will send you back coordinates
of the latest address search result and the raw array of
google.maps.places.PlaceResult objects provided by places
library.
Other optional parameters are the same as for g-map-marker
.
Requires places
library to be specified in environment.js
.
ENV['g-map'] = {
libraries: ['places']
}
actions: {
onLocationChangeHandler(lat, lng, results) {
Ember.Logger.log(`lat: ${lat}, lng: ${lng}`);
Ember.Logger.debug(results);
}
}
Using Google Maps Directions service.
You can optionally set travel mode with travelMode
attr:
walking
bicycling
transit
driving
(default)
You can optionally set following custom polyline options as attributes:
strokeColor
strokeWeight
strokeOpacity
zIndex
Proxy g-map-address-route
component takes 2 address strings as parameters
and translates them to lat/lng pairs under the hood.
Optional onLocationChange
action hook will send you back coordinates
of the latest address search result and the raw array of
google.maps.places.PlaceResult objects provided by places
library.
Other optional parameters are the same as for g-map-route
.
Requires places
library to be specified in environment.js
.
ENV['g-map'] = {
libraries: ['places']
}
actions: {
onLocationChangeHandler(lat, lng, results) {
Ember.Logger.log(`lat: ${lat}, lng: ${lng}`);
Ember.Logger.debug(results);
}
}
http://asennikov.github.io/ember-g-map/
- Auto-closing Info Windows
- Polylines & Polygons
- Google Maps events
ember server
- Visit your app at http://localhost:4200.
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.