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 case you want to make the google map to have full width and height as the parent div, you can do the following:
.g-map{
height: 100%;
}
.g-map-canvas {
width: 100%;
height: 100%;
}In config/environment.js you can specify:
- additional Google Maps
librariesto be loaded along with this add-on (check the full list here), - optional API
keyorclientID for your application (additional info could be found here), - optional
channel, - optional
versionnumber, - optional
excludeparameter, which prevents the addon from injecting the google maps api script tag into your app's index.html. This is useful if you need a custom strategy for loading the google maps script. - optional
languagefor map localization, - optional explicit
protocolsetting.
ENV['g-map'] = {
exclude: true,
libraries: ['places', 'geometry'],
key: 'your-unique-google-map-api-key',
client: 'gme-your-unique-google-client-id',
channel: 'my-google-map-api-channel',
version: '3.26',
language: 'ru',
protocol: 'https'
}The default Google Maps API library does not load in China, if your app needs to work in China you will need to implement a custom loading strategy for the Google Maps API.
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
titleattribute, - marker label using
label, draggableboolean option,onClickaction to track allclickevents on that marker,onDragaction to track alldragendevents on that marker (callback receives newlatandlngin attributes).viewportoptional google.maps.LatLngBounds, provides an optimized map viewport for the marker. This is generally provided by the google geocoder
You can assign custom images to your markers by pointing the icon attribute to an image file (jpg, png, svg, etc.)
You can also create a complex marker icon by defining an icon object and passing it to the icon attribute
myIcon: {
url: "/assets/images/driver-icon.svg",
size: new google.maps.Size(30,30),
scaledSize: new google.maps.Size(20,20),
anchor: new google.maps.Point(15, 15),
origin: new google.maps.Point(0, 0),
labelOrigin: new google.maps.Point(30, 15),
}These Info Windows will be open right after component is rendered
and will be closed forever after user closes them. You can specify optional onOpen action to trigger anything you need to when the Info Window opens. The infowindow is passed as the only argument to the onOpen action. 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/viewport under the hood.
The viewport is used internally to fit the map and can be passed as optional parameter.
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) {
const { viewport } = results[0].geometry;
Ember.Logger.log(`lat: ${lat}, lng: ${lng}`);
Ember.Logger.log(`viewport: ${viewport}`);
Ember.Logger.debug(results);
}
}Using Google Maps Directions service.
You can optionally set travel mode with travelMode attr:
walkingbicyclingtransitdriving(default)
You can optionally set following custom polyline options as attributes:
strokeColorstrokeWeightstrokeOpacityzIndex
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);
}
}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.
You can optionally set following custom polyline options as attributes:
strokeColorstrokeWeightstrokeOpacityzIndexclickabledraggablegeodesiciconsvisiblepath
For both the onClick and onDrag actions, the arguments are event and polyline:
actions: {
onPolylineDrag(event, polyline) {
const bounds = new window.google.maps.LatLngBounds();
polyline.getPath().forEach((e) => bounds.extend(e));
polyline.map.fitBounds(bounds);
}
}http://asennikov.github.io/ember-g-map/
- Polygons
- Google Maps events
- Better DEMO app
npm run lint:hbsnpm run lint:jsnpm run lint:js -- --fix
ember test– Runs the test suite on the current Ember versionember test --server– Runs the test suite in "watch mode"ember try:each– Runs the test suite against multiple Ember versions
ember serve- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent