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.
Installation
ember install ember-g-map
Configuration
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.
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.
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.
{{#g-maplat=37.7833lng=-122.4167zoom=12as |context|}}{{#g-map-markercontextlat=37.7833lng=-122.4267as |markerContext|}}{{#g-map-infowindowmarkerContextopenOn="mouseover"closeOn="mouseout"}}
<h2>Bound Info Window</h2>
{{/g-map-infowindow}}{{/g-map-marker}}{{#g-map-markercontextlat=37.7833lng=-122.4267as |markerContext|}}{{g-map-infowindowmarkerContextopenOn="click"closeOn="click"title="Blockless form 1"}}{{/g-map-marker}}{{#g-map-markercontextlat=37.7833lng=-122.4267as |markerContext|}}{{g-map-infowindowmarkerContextopenOn="dblclick"title="Blockless form 2"}}{{/g-map-marker}}{{/g-map}}
Grouped Markers with Info Windows
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.
{{#g-maplat=37.7833lng=-122.4167zoom=12as |context|}}{{g-map-address-markercontextaddress="San Francisco, Russian Hill"}}{{#g-map-address-markercontextaddress="Delft, The Netherlands"as |markerContext|}}{{#g-map-infowindowmarkerContext}}
Works in block form too.
{{/g-map-infowindow}}{{/g-map-address-marker}}{{g-map-address-markercontextaddress=searchedAddressonLocationChange=(action"onLocationChangeHandler")}}{{g-map-address-markercontextaddress=anotherSearchedAddressonLocationChange="onLocationChangeHandler"}}{{/g-map}}
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.
You can add optional waypoints to both {{g-map-route}} and {{g-map-address-route}}.
Waypoints could be added using
{{g-map-route-waypoint}} or {{g-map-route-address-waypoint}} components.
{{#g-maplat=37.7833lng=-122.4167zoom=12as |context|}}{{#g-map-address-routecontextoriginAddress="Los Angeles, California"destinationAddress="San Francisco, California"as |routeContext|}}{{g-map-route-address-waypointrouteContextaddress="New York City, New York"}}{{g-map-route-waypointrouteContextlat=37.7933lng=-122.4167}}{{g-map-route-address-waypointrouteContextaddress="Dallas, Texas"}}{{/g-map-address-route}}{{/g-map}}
Map with Polylines
You can optionally set following custom polyline options as attributes: