sandydoo / ember-google-maps

A friendly Ember addon for working with Google Maps.

Ember Google Maps

A friendly Ember addon for working with Google Maps.

• Create and draw on your maps using Ember components.
• Automatically load the Google Maps API on demand and safely access it across your entire app.

Thanks for using the addon!

ember-google-maps is over 3 years old now. In that time, I’ve completely rewritten it multiple times over to support changes in both Ember and Google Maps. I’d love to keep working on this addon in my free time, but could use your support.

If you use ember-google-maps in your commercial work or find it valuable, consider leaving a donation to support on-going maintenance and API costs.

Thank you! 🙌🙌🙌
— @sandydoo

• Documentation
  • Quick start
• Compatibility
• Examples
• Addons
• Maintainers
• Contributing
• License
• Disclaimer

Are you new to Ember? Learn how to use Ember and install addons →

Looking for a more general mapping solution? Check out ember-leaflet →.

📎 Documentation

Get started with ember-google-maps →

💨 Quick start for the impatient

1. Install the addon.

ember install ember-google-maps

2. Provide a Google Maps API key in config/environment.js. Learn how to create an API key →

'ember-google-maps': {
  key: "<GOOGLE_MAPS_API_KEY>"
}

3. Make sure your map has a size, or you’ll end up staring at a blank screen. ember-google-map is the default class for all maps.

.ember-google-map {
  width: 500px;
  height: 500px;
}

4. Draw a new map at some coordinates.

<GMap @lat="51.508530" @lng="-0.076132" />

5. Great! You’ve drawn a map.
   Now keep reading the docs →

🔗 Compatibility

• Ember.js v3.28 or above
• Ember CLI v3.28 or above
• Node.js v18 or above

⭐ Examples

Display a map centered around a set of coordinates.

<GMap @lat="51.508530" @lng="-0.076132" @zoom={{10}} />

Display an array of locations using markers 📍.

<GMap @lat="51.508530" @lng="-0.076132" @zoom={{10}} as |map|>
  {{#each this.locations as |location|}}
    <map.marker
      @lat={{location.lat}}
      @lng={{location.lng}}
      @onClick={{fn this.showDetails location}} />
  {{/each}}
</GMap>

Display a custom overlay, like a custom HTML marker using template blocks 😱. This lets you do all sorts of fancy things, like adding CSS animations and binding data.

<GMap @lat="51.508530" @lng="-0.076132" @zoom={{10}} as |map|>
  {{#each this.rentals as |rental|}}
    <map.overlay @lat={{rental.lat}} @lng={{rental.lng}}>
      <div style="transform: translateX(-50%) translateY(-50%);">
        <p class="price">
          {{rental.price}}
        </p>
      </div>
    </map.overlay>
  {{/each}}
</GMap>

Learn more →

🛒 Extra addons

• MarkerClustererPlus — Add marker clustering to your maps with @googlemaps/markerclustererplus.

😇 Maintainers

This addon is maintained by Sander Melnikov.

Contributing

See the Contributing guide for details.

License

MIT © Sander Melnikov.

Disclaimer

This software is not endorsed, maintained, or supported by Google LLC.

© 2020 Google LLC All rights reserved. Google Maps™ is a trademark of Google LLC.

ember-google-maps's Issues

Deprecation warning when overriding computed properties

WARN: DEPRECATION: The <dummy@component:g-map::ember214>#options computed property was just overriden. This removes the computed property and replaces it with a plain value, and has been deprecated. If you want this behavior, consider defining a setter which does it manually. [deprecation id: computed-property.override] See https://emberjs.com/deprecations/v3.x#toc_computed-property-override for more details.

Should be fixed by #58.

onDirectionsChanged causes a google map error

Complete this checklist before opening an issue

Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.

• I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.

• I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.

• I've searched the relevant section of the Google Maps API reference.

• I've searched the closed issues for similar problems.

---

Describe the bug

onDirectionsChanged causes a google map error: Cannot read property 'addEventListener' of undefined

To Reproduce

Steps to reproduce the behaviour, or a link to a reproduction repo or twiddle.

{{#g-map
    lat="51.508530"
    lng="-0.076132"
    zoom=12
    onLoad=(action "mapLoaded")
  as |g|}}
    {{#g.directions
      origin="Covent Garden"
      destination="Clerkenwell"
      travelMode="WALKING"
      onDirectionsChange=(action "onDirectionsChange")
    as |d|}}
    {{/g.directions}}
  {{/g-map}}

Expected behaviour

Action executes

Attempted solutions

Investigated the error, looks like when trying to add eventListener in register-events mixin, _eventTarget is undefined for that component

---

Addon configuration and device details

Addon configuration:

• 2.1.1
• Addon config from environment.js (do not post your API key):

{
    language: 'en',
    region: 'US',
    protocol: 'https',
    version: 'quarterly',
    libraries: ['geometry', 'places'], 
}

• Google Maps version: 3.36.12a

Desktop:
Chrome 75 in windows

AngleBrackets canvas class problems in ember-google-maps 2.2.1

We're defining maps using AngleBracket notation. Since the 2.2.1 release classes set through the class attribute aren't passed to the canvas div anymore:

<GMap
  @lat={{config.map.center.lat}}
  @lng={{config.map.center.lng}}
  @zoom={{config.map.zoom}}
  as |g|
>
  <g.canvas class="h-full w-full" />
</GMap>

Passing them using @classNames="h-full w-full" works though.

I know this functionality wasn't documented before, but it would be nice if attributes could be splat on the div somehow.

Addon throws 'Uncaught RangeError: Maximum call stack size exceeded' on new Ember JS App Version 3.6

Describe the bug

This addon throws the following error on the chrome browser console when installed and run on the latest ember js release version 3.6:

Uncaught RangeError: Maximum call stack size exceeded
    at Array.CPGETTER_FUNCTION [as []] (metal.js:751)
    at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)
    at $b (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:71)
    at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)
    at $b (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:71)
    at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)
    at $b (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:71)
    at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)
    at $b (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:71)
    at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)

To Reproduce

Just create a brand new Ember JS version 3.6 application and install the addon. Then simply put a simple map on the application template such as {{g-map lat="-1.2325835" lng="36.8766528" zoom=17}} and run the application in a chrome browser.

Then:

1. Go to 'chrome console'
2. Observe the listed errors: Uncaught RangeError: Maximum call stack size exceeded

Expected behaviour

Do not expect to see any errors in the console.

Attempted solutions

I ran 'npm outdated' to see which dependencies were outdated and then went ahead to update them to the latest versions but this did not fix the issue.

---

Addon configuration and device details

Addon configuration:

• Addon version: 2.1.0

• Addon config from environment.js (do not post your API key):

  let ENV = {
    'ember-google-maps': {
      language: 'en',
      libraries: ['geometry', 'places'],
      key: '<valid key>'
    }
  };

• Google Maps version: [e.g. 3.31] google maps api version 3.

Desktop:

• OS: [e.g. iOS] Mac Os El-capitan

• Browser : Chrome

• Version : 71.0.3578.98

ember-google-maps update

Hi Dear

I am David, hope You can help me. I have a "Google Maps JavaScript API warning: RetiredVersion" warning and as said in documentation I changed version: '3.34' to version: '3.35', and update version "ember-google-maps": "^2.1.0". Now I have same warning too, besides that map not open first time before reinit.

Thanks for understanding.

Setting PlaceTypes for Autocomplete

Hi,

O am trying to restrict autocomplete to list only allowed types eg:- geocode, addresses etc. How can I pass these values- https://developers.google.com/places/supported_types

Thank you in advance,
Sujata Yellaepeddi

How to prevent Zoom in or Zoom Out on click

Probably this is not a bug, more like a question.
I have a map with default lat/lng set while rendering. Now I pan and zoom in and then click on the map. This triggers the click event and I get the new place lat/lng. However map zooms back to initial zoom position displaying the marker at the new place.

I want to retain the zoom level whatever user have set before clicking. @sandydoo Could you please help me with that ?

How do I load a utility library like infobox.js without triggerring 'google is not defined' error?

I have a need of using the following utility library which is actually a more customizable version of google maps infowindows: infobox.js source.

I tried adding it the usual way through importing it in the ember-cli-build from vendor directory and then adding a new component aptly called info-box. I removed the template file so it uses the info-window template instead and this is what I put in the javascript file:

import InfoBox from 'info-box';
import GoogleMapInfowindow from 'ember-google-map/components/g-map/info-window';
import {
  set
} from '@ember/object';
export default GoogleMapInfowindow.extend({
  _type: 'infoBox',
  _addComponent() {
    this._prepareContent();

    let options = this._getOptions();

    set(this, 'mapComponent', new InfoBox(options));
  }
});

The above way of extending and overriding the google info-window component worked with my previous ember-g-map addon because infobox.js is meant to be an exact copy of google infowindow except with the added features and customizability.

On running my application after the above I understandably get the google is not defined error.

I know I can use your custom overlays contextual component but it lacks some features which are available in infobox.js which actually extends google.maps.OverlayView class. Some of the features missing from your custom overlays are pixelOffset and alignBottom which are both options that can be passed to a new instance infobox. Both of these allow me to offset/reposition the infobox popup relative to the pin point location.

My application was already using infobox.js extensively so it would be nice to port this somehow to the ember-google-maps contextual components.

Any advice on how to achieve this even minimally?

Is it possible to create cluster of custom overlays?

Documentation propose using custom overlays in place of markers whenever more advances formatting is required. Google provides a few nice solution that are handy to use with map that is based on many markers, ie. https://developers.google.com/maps/documentation/javascript/marker-clustering. Is there anything similar that can be used as replacement for overlays?

Plugins

Any plans for promoting a specific plugin pattern for addons that want to provide functionality that isn't in this addon? Like https://github.com/knownasilya/google-maps-markup or an addon that works with google.maps.Data as some examples.

Change in region stops map rendering.

Hi, I'm an ember js developer from South Africa and I really like this addon but it doesn't seem to show the map as soon as I change the region to ZA. Is there a way for it work with ZA or is it not supported?

`in-repo-pin-addon` gets linted when running app tests

Complete this checklist before opening an issue

Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.

• I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.

• I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.

• I've searched the relevant section of the Google Maps API reference.

• I've searched the closed issues for similar problems.

---

Describe the bug

It looks like the in-repo-pin-addon in-repo-addon gets linted when running the tests of the consuming app.

We recently enabled the no-implicit-this template lint rule, and since the lint.hbs component template doesn't comply it fails our pipeline.

To Reproduce

1. Add ember-google-maps to a new project
2. enable the no-implicit-this rule and run the test suite

Expected behaviour

The in-repo-pin-addon addon does not get linted by the consuming apps linting config.

Attempted solutions

We tried blacklisting the in-repo-pin-addon addon in our app, but I guess that doesn't work. We also tried updating the linting config to skip the addon, but we can't get that to work either.

---

Addon configuration and device details

Addon configuration:

• Addon version: v2.1.1

• Addon config from environment.js (do not post your API key):

    'ember-google-maps': {
      key: GOOGLE_API_KEY,
      language: GOOGLE_MAPS_LANGUAGE,
      region: GOOGLE_MAPS_REGION
    }

Autocomplete is not restricting to a country

I am trying to use the autocomplete component and even though I am passing region as 'US' it still returns results from all over the world. As I look further it seems Autocomplete needs to be restricted using componentRestrictions.
eg:-
var options = {
types: ['(places)'],
componentRestrictions: {country: 'US'}
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Please can you check this out and fix it for us

Addon gotcha: instance.on('willDestroyElement') calls too soon

Hey @sandydoo, I'm back again 😉 I've been building a geoJson setup for a client using an addon that hooks into the addon system. Works great for almost everything I need.

But I'm hitting a snag around willDestroyElement and removing items from the main map using an addon and public api. Specifically, in a scenario where I do this:

{{#g-map ... as |g|}}
  {{#each plots as |plot|}}
    {{g.data feature=plot.feature}}
  {{/each}}
{{/g-map}}

Things work great on setup (there's a bunch of hand-waving here around plot.feature, but things are working there). Where I'm running into issues is if I remove a plot from the plots array and want it removed from the map.

In my g.data component, I've got code much akin to this:

export default MapComponent.extend({
  ...

  _type: 'data',
  _feature: undefined,

  _addComponent() {
    const map = this.get('publicAPI.map');
    this.set('_feature', map.data.add(this.get('feature'));
  },

  ...

  willDestroyElement() {
    let map = this.get('map');

    // would like to move to this usage. But requires changes to the proxy class in order to support it
    // const map = this.get('publicAPI.map');
    map.data.remove(this.get('_feature'));

    this._super(...arguments);
  }
});

This all works (and works well). But I'd like to be sticking to the straight and narrow and uses a call to this.get('publicAPI.map') instead as I unload a given feature from the map. However ...

What I'm hitting is that the registration of publicAPI that occurs in the MapComponent#init hook leads to the publicAPI instance.on('willDestroyElement') event handler being called prior to the willDestroyElement method I'm setting up myself.

I've temporarily wired around this by using the internal this.get('map') call, but would like to stick to using what you've clearly asked me to 😉 I'll push up a PR with a suggested change, but would love to hear your thoughts here ...

Missmatch in documentation related to compatibility

Hi, I am starting to use this library, however there's a mismatch in the documentation that make some noise. It's about the compatibility as I explain next:

• In ember-google-maps.sandydoo.me I don't see any section about compatility

• In the readme in github the compatibility is for Ember.js v2.18 or above

• In Emberobserver.com the comatibility ask for Ember.js v3.4 or above

So, which one is correct?

InfoWindow not showing

I'm having an infoWindow issue: the isOpen option doesn't seem to be working. I've verified that the toggle action is properly setting true false, but I can't get the infoWindow to respond

{{#g-map lat="39.0986106" lng="-98.6166598" zoom=4 as |g|}}
    {{#each this.model as |provider|}}
      {{#g.marker lat=provider.latlon.[0] lng=provider.latlon.[1] onClick=(action "toggle") as |m|}}
        {{#m.infoWindow isOpen=provider.markerOpen }}
          {{provider.name}}
        {{/m.infoWindow}}
      {{/g.marker}}
    {{/each}}
  {{/g-map}}

Uncaught TypeError: Cannot read property 'LatLng' of undefined

After following the readme and guide to get started, I am unable to render the most basic component. It seems as if the Google objects are not loaded at the point it's invoked.

In looking at the Google Maps API docs, I see that https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap includes invoking a callback. Is this handled internally?

I've pretty much taken the exact steps in the Getting Started guide and can't seem to get past this.

Any tips?

Overlay documentation suggestion (innerContainerStyle)

Thanks so much for this addon - I'm in the process of migrating from ember-g-map and it's been relatively painless.

For the overlay component, the innerContainerStyle is set up nicely for tooltip type content whose anchor is at the bottom middle of the content. However, if you have content that is meant to be centered on the lat/lng (e.g. a user location circle), you need to override innerContainerStyle to htmlSafe('transform: translateX(-50%) translateY(-50%);'). I would suggest including a note to this end in the docs.

I'm not sure if your docs site is a separate and available repo or included in the main ember-google-maps repo; if so, please feel free to point me to it and I'll submit a PR.

Example error for controls in docs.

At https://ember-google-maps.sandydoo.me/docs/controls the g.control example has the position property set to position="TOP CENTER" when it should be position="TOP_CENTER". I didn't see a gh-pages branch or anything so reporting this here. Thanks!

Potentially interested in adding Typescript annotations?

Hey @sandydoo, I've recently started working for another client were we're likely to use your addon there too. That client uses Typescript fairly heavily and might be interested in helping add Typescript annotations to your addon if you're interested. There is a quest issue to add TypeScript support throughout the Ember.js ecosystem and according to them, it will benefit everyone who uses this addon, not just TypeScript users! (See this discussion for more details

Would you be interested in either converting the addon to use TypeScript itself, or in adding type definitions? I’d love to help out if so ...

Thanks!

Ember concurrency version

It looks like the ember concurrency is hard pinned to a specific version. Our dependency lint is failing at the moment, since our app and some addons installed patch versions which aren't compatible with that pinned version.

Is there a reason why the version is pinned, instead of using a range?

Get lat and long for address

Complete this checklist before opening an issue

Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.

• I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.

• I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.

• I've searched the relevant section of the Google Maps API reference.

• I've searched the closed issues for similar problems.

---

Describe the bug

I do not have lat or long, does this addon get that data or would I need another addon to get it?

Make it possible to adjust the zIndex of map components

It would be nice if map components had a zIndex attribute to make it possible to influence the display order. In our app we have a focus state for certain components, but they aren't always displayed on top.

Any suggestions on how you would implement something like that?

Directions Panel

Thanks for all the work on this addon. It's fantastic.

As you mention in the docs, getting the bits out of the directions object for a route can be a pain. I'm sure you're aware of the method setPanel() on the DirectionsRenderer that will insert formatted turn by turn instructions into the element passed to the method. Would you have any interest in a PR to add an option to pass an element's id to the route component? I took a first pass. I'm happy to make changes to match style preferences, add tests, update the docs, and whatnot.

Again, thanks for all hard work here.

Add component(s) for working with Google Maps Data layer

The google maps Data layer is useful for rendering arbitrary geospatial data onto map in the form of GeoJSON and polygons. It'd be great if `ember-google-maps' provided a components for adding and styling GeoJSON data and polygons.

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data

Support runtime Google Maps URL configuration

The Google Maps URL is created at build time. It would be useful to be able to set some of the options, such as language or region, at runtime. E.g. determine the language or region from a user profile.

Polyline deprecation warning because of _watchedOptions

Describe the bug

Using polylines in Ember 3.6 creates a deprecation warning when destroying the component. This is caused by prototype function listener specified in g-map/polyline.js R15: _watchedOptions.

To Reproduce

1. Add a polyline
   {{g.polyline path=map.route geodesic=true strokeColor="#58a5d3" strokeOpacity=0.7 strokeWeight=2}}

2. Navigate to a different page of remove the block containing the polyline.

3. Console:
   DEPRECATION: You attempted to remove a function listener which did not exist on the instance, which means it was an inherited prototype listener, or you attempted to remove it before it was added. Prototype function listeners have been deprecated, and attempting to remove a non-existent function listener this will error in the future. [deprecation id: events.inherited-function-listeners] See https://emberjs.com/deprecations/v3.x#toc_events-inherited-function-listeners for more details.

infowindows not opening

Describe the bug

Firstly, thank you so much for building such a lovely api wrapper for google maps, the move from ember-cli-g-maps has removed so much code!!

Apologies if I'm missing something basic but I can't seem to get my infowindows to open. I know that the open attribute is being set correctly but for some reason the windows themselves aren't showing.

To Reproduce

// controller.js
actions: {
  onMapLoad(publicApi) {
    set(this, 'gmapApi', publicApi);
    // this is then used to manually set the bounds of the map once the site 
    // markers are loaded which is why I don't set a lat and lng for the map initially
  }
}

// template.hbs
  {{#g-map 
    disableDefaultUI=true 
    zoomControl=true
    onLoad=(action "onMapLoaded") 
  as |g|}}    
    {{#each sites as |site|}}
      {{#g.marker 
        lat=site.address.latitude
        lng=site.address.longitude
        onClick=(action (toggle "mapInfoWindowOpen" site))
      as |marker|}}
        {{marker.infoWindow isOpen=site.mapInfoWindowOpen content="test"}}
      {{/g.marker}}
    {{/each}}
  {{/g-map}}

Attempted solutions

I've tried following you instructions here for creating one infowindow and changing the target but I get the same result.

---

Addon configuration and device details

• ember version: 3.9.0

Addon configuration:

• Addon version: 2.1.1

• Addon config from environment.js (do not post your API key):

  ENV['ember-google-maps'] = {
    key: process.env.GOOGLE_MAPS_API_KEY, // Using .env files in this example
    language: 'en',
    region: 'GB',
    protocol: 'https',
    version: '3.35',
    libraries: ['drawing'], // Optional libraries
    // client: undefined,
    // channel: undefined,
    // baseUrl: '//maps.googleapis.com/maps/api/js'
  };

• Addon config from ember-cli-build.js:

    'ember-google-maps': {
      only: ['marker', 'info-window']
    }

• Google Maps version: 3.35

Desktop:

• OS: osx 10.14.3

• Browser: chrome

• Version: 73.0.3683.86

No way to get overlay's OverlayView instance (mapComponent)

While other components expose their mapComponent as the target of the object passed into event handlers, overlay is the exception, because the target is the HTMLElement.

There seems to be no public way to get access to the OverlayView class instance for g-map/overlay components.

Components don't react to changes of lat and lng

It seems like g-map and g.marker both do not react to changes of lat and lng. I guess this might not be wanted in some scenarios, but sometimes it is useful. I guess we could have an observer like this?

  setPosition(position) {
    return this.mapComponent && this.mapComponent.setPosition(position);
  },

  observePosition: observer('position', 'shouldObservePosition' function() {
    if (this.get('shouldObservePosition')) {
      this.setPosition(this.get('position'));
    }

Do you have any idea for some workaround? I tried to extend a marker component, but I am not really sure how to extend a contextual component without losing, well, context.

Usecase:

1. Google-map with one draggable marker is rendered
2. An address is typed into an input field
3. Google Maps API returns coordinates
4. Marker position and possibly also map position needs to be updated from the outside

Overlay component not working in combination with whitelist

Looks like the -private-api/detect-render component is excluded if you use a whitelist but it's necessary for the overlay component.

ember-google-maps on ios webview

Just wanted to log an issue for any near-term future people trying to use google maps in a ios webview. I ran into an issue where the view would go "brown" or blank. I ended up adding the following css rule:

.ember-google-map {
   -webkit-transform: rotate(0deg);
}

This solution was mentioned in this issue:
ionic-team/ionic-native-google-maps#213 (comment)

🍻

Google Distance To

Great add on. One question, does this have 'Distance To' functionality built in?

I'd like to measure the distance to one point from another. Not sure if I missed it on the docs or not, but a point in the right direction would be helpful. Here's some info..

https://developers.google.com/maps/documentation/distance-matrix/intro

This codepen is basically doing what I want..

https://codepen.io/youfoundron/pen/GIlvp

thank you!!

Autcomplete Usage

Has anyone used the autocomplete component as a standard autocomplete (with dropdown and no map?). There's not much in the docs about how to integrate the autocomplete, so looking for a few examples. Thanks!

performance consequences of component per google-maps construct

First off, I want to say that this library is a really elegant way to interface with google maps. I love the declarative style. But I'm experiencing serious performance degradation when trying to scale to a growing number of markers which has caused me to temporarily role my own solution. I'd like to discuss what you would be open to in this library when scale becomes an issue (or how we can improve ember-google-maps to better support lots of markers).

In my own application, I've gone from needing to show ~50-100 pins to 750 pins - 1000 pins overnight. When entering my route with the map, the load time takes anywhere from 3-6 seconds on my macbook pro in chrome and as much as 20 seconds on some older android devices. I've profiled the slow loading and it's not google, it's the amount of time spent in the rendering engine for ember that's bottlenecking. Furthermore, my own handrolled solution renders 1k instantly.

Consider this markup:

{{#g-map as |map|}}
    {{#each locations as |location|}}
        {{#map.marker lat=location.latitude lng=location.longitude onClick=(action "openLocationPopup" location) as |marker|}}
            {{#marker.infoWindow isOpen=(eq activeLocation location) as |i|}}
                {{!-- more components here --}}
            {{/marker.infoWindow}}
        {{/map.marker}}
    {{/each}}
{{/g-map}}

All of that is evaluated at render time despite no marker.infoWindow being shown at render time. There is a non-negligible overhead to creating a component per marker. Even if I clustered the markers via the standard google clustering lib, to leverage such a component based approach as done here means I'm still stuck in the render bottleneck of glimmer trying to work through a lot of components that arent even rendering anything yet (or ever).

What i've implemented in my own project is a markers-layer that receives all locations for me to render with an inner component for the marker window that's used for a yielded current location.

Support optional automatic map bounds management

It would be great if ember-google-maps offered a utility for automatically managing the zoom and center of the map based on the components placed the map.

ember-g-map offers this feature with it's markersFitMode property on the g-map component. The markersFitMode parameter can be used instead of, or as an override to, the explicit lat/lng/zoom properties. With markersFitMode='init' ember-g-map will automatically set the map bounds to contain all of the markers shown on the map, and when markersFitMode='live' it will also update the map bounds as markers are added or removed from the map.

I would suggest a few improvements over the ember-g-maps implementation:

1. Automatic bounds management should be based on markers, circles, infowindows, overlays and polylines (not just markers). This should also be configurable, for example if you need your map to auto-bound to circles but not markers. Additionally, we could add an API to make this opt-in on the component level so that any individual map components can be flagged for inclusion in the map's bounds.

2. The ember-g-maps implementation doesn't keep track of whether a user has manually altered the zoom or pan of the map, so any change to the markers will reset the map pan/zoom. This can be jarring in situations where a user has zoomed or panned the map, only to have their work blown away by a data change they may not have triggered. There should be a configuration to allow the map to disable the auto-bounding behavior if a user has manually adjusted the map's pan or zoom. Additionally, a method could be exposed allowing map.fitBounds to be manually triggered.

3. An option should be provided to chose whether fitBounds or panToBounds is used under the hood when the map bounds change as a result of auto bounds management.

4. The overall API for enabling and configuring this behavior needs some thought. Should it be another contextual component ({{g.bounds-manager mode='init' pan=true}}) or should this be a parameter(s) on the {{g-map}} itself?

5. As part of this feature work, it may be worth considering adding the ability to pass the {{g-map}} a bounds parameter instead of lat/lng/zoom.

If there is agreement that this is a desirable feature to add to the addon, and an API is agreed on, I would be happy to work on implementation.

Alternatives
Most of these features could probably be implemented outside of the ember-google-maps, either as a "plugin" addon or a custom in-app component designed to be used inside a {{#g-map}} block. Some of the features I've suggested can't be done without changing ember-google-maps.

Is there a way to create boundaries ?

So i am working with some large data set which has boundary data in the component. I would like to create a boundary around this area? Is that what a polyline does?

onComponentsLoad is invoked twice

Is it intentional that onComponentsLoad is invoked two times? This was not documented nor expected and feels like a bug to me. In _initMap in g-map.js, the _waitForComponents function invokes onComponentsLoad and the afterRender function which invokes _waitForComponents invokes it as well on resolution of the _waitForComponents promise:

scheduleOnce('afterRender', this, () => {
  if (this.isDestroying || this.isDestroyed) { return; }

  this._waitForComponents()
    .then(() => {
      this._componentsInitialized = true;
      tryInvoke(this, 'onComponentsLoad', [this.publicAPI]);
    });
});

  _waitForComponents() {
    let componentsAreInitialized =
      Object.keys(this.components)
        .map((name) => this.components[name])
        .reduce((array, componentGroup) => array.concat(componentGroup), [])
        .map((components) => get(components, 'isInitialized.promise'));

    return all(componentsAreInitialized)
      .then(() => {
        this._componentsInitialized = true;
        tryInvoke(this, 'onComponentsLoad', [this.publicAPI]);
      });
  },

This initially lead to bugs for me and I'm having to ensure I call my handler only once

Update Feature Comparison Table

Great work on this Addon!

You may know me as the reluctant author of ember-cli-g-maps. I just wanted to let you know I've just added a deprecation notice to my addon, which recommends usage of this project instead. While you may wish to keep the feature comparison table of ember-cli-g-maps, it might also be unnecessary to invite the comparison at this point. Anyway this is more of an FYI, obviously it's your call.

Memory leak introduced by Google Maps

Hi! This map addons looks amazing and I cannot wait to start using it instead of ember-g-map. But some issue that we faced seem to be an issue with this addon as well and I wonder if you are aware of it and maybe have plans on fixing it.

I'm talking about memory leaks which Google Maps produce because there is no proper cleaning after we remove a map from page.
Here is an issue reported to google years ago https://issuetracker.google.com/issues/35821412
And it has status Won't fix. The only answer on how to solve that in that thread is recommendation to reuse (map canvas?) somehow.

I tried to check examples on your website which seem to be fully built in Ember with the use of this amazing addon. If I navigate between Directions and Controls examples multiple times I can see that memory is leaking.

I wonder how that would be if we would use multiple long-distance directions. This is what seem to make maps to leak heavily in our case because of huge arrays of coordinates from DirectionService.

So the questions are:

1. Are you aware of this issue?
2. Did you already try to reuse map canvas? Maybe you did and faced some unsolvable issues...
3. Do you see how this can be done? Workarounds? A plugin to this addon? Anything?

`didUpdateAttrs` causing unnecessary rerenders

Regarding emberjs/ember.js#17397

didUpdateAttrs is called if either of the following circumstances:

• When passed in arguments have changed
• Any other time

---

• Any other time

... applies to a scenario we currently have.

We experience issues where the didUpdateAttrs hook in g-map is called very often, even though no params have been changed, but according to the linked issue this is expected behavior. The side effect we experience is that event handlers, like onZoomchanged are called very often, causing itself a change of the params and so on...

Would it be a good idea to check for a change in the params, before continuing to update the Google Map?

btw. great work - love the addon 🚀 !

Option to silence build warning when using runtime configuration

Would be cool to silence the build warning from index.js, when using the runtime configuration (buildGoogleMapsUrl).

Infowindow issues

Hey,
I'm using the infowindow attached to around 600 markers and the rendering is horribly slow, when I trie to hide and show one IW.
To boost the rendering, I've created only one IW with the lat, lng of an active item. But now the IW is not properly positioned, like in the example:

It should float above the marker. How can I adjust the position of it? I found that there is a property pixelOffset for that.

Add some CSS to support printing?

Complete this checklist before opening an issue

Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.

• I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.

• I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.

• I've searched the relevant section of the Google Maps API reference.

• I've searched the closed issues for similar problems.

---

Describe the bug

I've been building a complex map over the last few months for a client and one of the latest feature requests was that we be able to print it in-browser, allowing folks to specify zoom and positioning for the map. When printed in Webkit-based browsers, we were seeing map tiles tear as outlined in this Chromium bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=426294

The official Google Maps line on printing is that printing isn't supported and the common recommendation is that the Google Static Maps API be used instead. But in my particular use case, there is no way we'll fit inside the size constraints of the Google Static Maps API and there is enough state in the browser that we track that doing printing on the backend could be a royal pain.

Per the bug report above, it looks to be an issue with Google Maps / Webkit browsers and there is also a CSS fixed suggested: https://bugs.chromium.org/p/chromium/issues/detail?id=426294#c13

That CSS tweak ended up fixing my issues (so far, 🤞). So my question is, would we want to consider adding that CSS to this addon to keep other folks from getting snagged in the future? I can see going either way (Google Maps might incorporate the fix themselves or some variant down the road, which would mean we'd be shipping unneeded CSS in this addon for a long time). But it caused enough headaches on this end that I thought I'd bring the idea up ...

Thoughts?

minZoom and maxZoom only seem to work in options

Complete this checklist before opening an issue

Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.

• I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.

• I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.

• I've searched the relevant section of the Google Maps API reference.

• I've searched the closed issues for similar problems.

---

Describe the bug

This page https://ember-google-maps.sandydoo.me/docs/map reads:

The g-map component accepts all of the GoogleReference::MapOptions options you would pass to a Google Map instance. These are automatically watched for changes.

And there is an example with minZoom. But this doesn't seem to work, the map pugin seems to respect minZoom and maxZoom only when passed in options object.

To Reproduce

Does not work:

{{#g-map
  minZoom=minZoom
  maxZoom=maxZoom
}}

Works:

options = {
  minZoom: minZoom,
  maxZoom: maxZoom
}

{{#g-map
  options=options
}}

---

Addon configuration and device details

Addon configuration:

• Addon version: 2.0.5

Assertion Failed: You cannot create a component from undefined using the {{component}} helper

so i m using ember version 3.0.0, so i have used this addon, the markers, overlay etc works fine,
but only issue what i m facing now is when i using this code

{{#g-map lat="51.507568" lng="-0.127762"
zoom=12
styles=primaryMapStyle as |g|}}

{{!-- A manually positioned info window with basic text --}}
{{g.infoWindow lat=london.lat lng=london.lng
isOpen=mapTooltipOpen
content="Simple text tooltip"}}

{{!--
An info window attached to a marker component.
Notice how it is yielded by the marker itself.
This info window displays the template defined in the block --}}
{{#g.marker lat=london.lat lng=london.lng
onClick=(action (toggle "markerTooltipOpen" this)) as |m|}}
{{#m.infoWindow isOpen=markerTooltipOpen as |i|}}

Custom HTML content in infoWindow!

{{/m.infoWindow}}
{{/g.marker}}
{{/g-map}}

this is the exact copy from the documentation, when i use i get this error
"Error: Assertion Failed: You cannot create a component from undefined using the {{component}} helper↵

this is from my ember-cli-build.js
'ember-google-maps': {
only: ['marker', 'info-window', 'overlay']
// exclude: ['overlay']
},

and this is from my config/enviroment.js
ENV['ember-google-maps'] = {
key: 'fdsfdsfsdfdsfdsfsdfsdf', // Using .env files in this example
language: 'en',
region: 'GB',
protocol: 'https',
version: '3.35',
libraries: ['geometry', 'places'], // Optional libraries
// client: undefined,
// channel: undefined,
// baseUrl: '//maps.googleapis.com/maps/api/js'
}

can u tell me what i am doing wrong or what am i missing

How to call the g.canvas component and be able to put other components inside it as well as outside?

Have seen the example of being able to call the canvas component to be able to place other components/mark up outside of the map canvas, but what if you also want other components within the canvas at the same time?

Improve treeshaking

• Fix keys.
• Implement tests.
• Warn when configured incorrectly. We should strive to avoid issues like #59.

Difficulty Styling Map

I'm having difficulty styling my map (similar to how the example rentals project is styled). I'm having trouble finding any specific sections of the docs that deal with styling. Could you point me in the right direction? Happy to contribute to the docs once sorted!

Draw on Map

Is there a way to add the Circle or Polygono Search where you draw on the map and it search based on your selection?