# Ember-g-map [](https://travis-ci.org/asennikov/ember-g-map) [](http://emberobserver.com/addons/ember-g-map) [](https://coveralls.io/github/asennikov/ember-g-map?branch=master) [](https://codeclimate.com/github/asennikov/ember-g-map)
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:
```css
.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](https://developers.google.com/maps/documentation/javascript/libraries)),
optional API key for your application (additional info could be found [here](https://developers.google.com/maps/web/)) and optional explicit protocol setting.
```javascript
ENV['g-map'] = {
libraries: ['places', 'geometry'],
key: 'your-unique-google-map-api-key',
protocol: 'https'
}
```
# Usage
## Simple map
```handlebars
{{g-map lat=37.7833 lng=-122.4167 zoom=12}}
```
## Map with custom options
Any [custom options](https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions)
(except for `center` and `zoom` to avoid conflicts) could be set for
Google Map object on creation and updated on change.
```handlebars
{{g-map lat=37.7833 lng=-122.4167 zoom=12 options=customOptions}}
```
## Map with Markers
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 all `click` events on that marker.
```handlebars
{{#g-map lat=37.7833 lng=-122.4167 zoom=12 as |context|}}
{{g-map-marker context lat=37.7933 lng=-122.4167 onClick=(action "handleClick")}}
{{g-map-marker context lat=37.7833 lng=-122.4267 onClick="handleClick" title=titleForSecondMarker}}
{{g-map-marker context lat=37.7733 lng=-122.4067 label="3" title="Marker #3"}}
{{/g-map}}
```
## Map with Info Windows
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](https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindowOptions)):
- disableAutoPan,
- maxWidth,
- pixelOffset
```handlebars
{{#g-map lat=37.7833 lng=-122.4167 zoom=12 as |context|}}
{{#g-map-infowindow context lat=37.7733 lng=-122.4067}}
Info Window with Block
Text with {{bound}} variables
{{/g-map-infowindow}}
{{g-map-infowindow context lat=37.7733 lng=-122.4067
title="Blockless form" message="Plain text."}}
{{g-map-infowindow context lat=37.7733 lng=-122.4067
title="With action set"
onClose="myOnCloseAction"}}
{{g-map-infowindow context lat=37.7733 lng=-122.4067
title="With closure action set"
onClose=(action "myOnCloseAction")}}
{{/g-map}}
```
## Map fits to show all initial Markers
`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.
```handlebars
{{#g-map markersFitMode='live' as |context|}}
{{g-map-marker context lat=37.7933 lng=-122.4167}}
{{g-map-marker context lat=37.7833 lng=-122.4267}}
{{g-map-marker context lat=37.7733 lng=-122.4067}}
{{/g-map}}
```
## Map with Markers and bound Info Windows
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.
```handlebars
{{#g-map lat=37.7833 lng=-122.4167 zoom=12 as |context|}}
{{#g-map-marker context lat=37.7833 lng=-122.4267 as |markerContext|}}
{{#g-map-infowindow markerContext openOn="mouseover" closeOn="mouseout"}}
Bound Info Window
{{/g-map-infowindow}}
{{/g-map-marker}}
{{#g-map-marker context lat=37.7833 lng=-122.4267 as |markerContext|}}
{{g-map-infowindow markerContext openOn="click" closeOn="click" title="Blockless form 1"}}
{{/g-map-marker}}
{{#g-map-marker context lat=37.7833 lng=-122.4267 as |markerContext|}}
{{g-map-infowindow markerContext openOn="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.
```handlebars
{{#g-map lat=37.7833 lng=-122.4167 zoom=12 as |context|}}
{{#g-map-marker context group="cats" lat=37.7833 lng=-122.4167 as |markerContext|}}
{{#g-map-infowindow markerContext}}
{{/g-map-infowindow}}
{{/g-map-marker}}
{{/g-map}}
```
## Marker bound to address query
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](https://developers.google.com/maps/documentation/javascript/reference#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`.
```javascript
ENV['g-map'] = {
libraries: ['places']
}
```
```javascript
actions: {
onLocationChangeHandler(lat, lng, results) {
Ember.Logger.log(`lat: ${lat}, lng: ${lng}`);
Ember.Logger.debug(results);
}
}
```
```handlebars
{{#g-map lat=37.7833 lng=-122.4167 zoom=12 as |context|}}
{{g-map-address-marker context address="San Francisco, Russian Hill"}}
{{#g-map-address-marker context address="Delft, The Netherlands"}}
{{#g-map-infowindow markerContext}}
Works in block form too.
{{/g-map-infowindow}}
{{/g-map-address-marker}}
{{g-map-address-marker context address=searchedAddress
onLocationChange=(action "onLocationChangeHandler")}}
{{g-map-address-marker context address=anotherSearchedAddress
onLocationChange="onLocationChangeHandler"}}
{{/g-map}}
```
## Map with route between 2 locations
Using Google Maps [Directions](https://developers.google.com/maps/documentation/javascript/directions) service.
You can optionally set travel mode with `travelMode` attr:
- `walking`
- `bicycling`
- `transit`
- `driving` (default)
```handlebars
{{#g-map lat=37.7833 lng=-122.4167 zoom=12 as |context|}}
{{g-map-route context
originLat=37.7933 originLng=-122.4167
destinationLat=37.7733 destinationLng=-122.4167}}
{{/g-map}}
```
## Demo
http://asennikov.github.io/ember-g-map/
# Planned Features
- Auto-closing Info Windows
- Polylines & Polygons
- Google Maps events
## Running
* `ember server`
* Visit your app at http://localhost:4200.
## Running Tests
* `ember test`
* `ember test --server`
## Building
* `ember build`
For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
## Legal
[Licensed under the MIT license](http://www.opensource.org/licenses/mit-license.php)