Google Maps API error

[robgmerrill]

When running the demo app (https://ember-learn-super-rentals.herokuapp.com/rentals) the google map is not working (looks broken).

from the developer console:

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
_.rb @ js?v=3.22:35

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
JB.j @ util.js:222
(anonymous) @ js?v=3.22:134
(anonymous) @ js?v=3.22:53
(anonymous) @ js?v=3.22:50
(anonymous) @ js?v=3.22:53
(anonymous) @ js?v=3.22:105
(anonymous) @ js?v=3.22:50
(anonymous) @ js?v=3.22:105
Sc @ js?v=3.22:52
Rc.jb @ js?v=3.22:105
(anonymous) @ stats.js:1
util.js:222 Google Maps API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-version

[toddjordan]

We need to add the maps key into the app build according to https://guides.emberjs.com/v2.18.0/tutorial/deploying/

[jaredgalanis]

@toddjordan @jenweber @locks

The new pricing from Google for the Map API can be found here. The gist is that you get a $200 recurring monthly credit on an account. Since we cannot guarantee the credit will not be exceeded it's probably better to find an OSS solution that does not present the risk of incurring a cost.

@yohanmishkin sent me this article, which I believe points to most other mapping solutions requiring payment at some level of usage.

The ember leaflet addon appears to be a decent cost-free solution (in monetary value at least) to the Google Maps API problem described in this issue. This addon wraps leaflet.js which itself makes use of Open Street Maps. FWIW, I think perhaps others have suggested this one in the past.

I'm in the process of adding ember leaflet to my fork of the tutorial to see how it works, but pending a successful outcome there, I'd be happy to open a PR to incorporate this as a new mapping solution.

Thoughts?

[acorncom]

Hey @jaredgalanis, thanks for looking into this in-depth. I was thinking about this issue last week as well. Our main reason for introducing mapping at all in the tutorial is to introduce the idea of a service (how to use them and how to test them). If we shift to ember-leaflet, we continue to maintain maps (and get maps that look sharp), but we lose the ability to talk about services (as things are handled for us by the ember-leaflet addon). I’m not necessarily opposed to that (as we could shift our services discussion earlier in the tutorial and have the service in essence be a “fetch” service that pretends to fetch data - or actually does). But we have to recognize the trade off we’re making ...

Are there any mapping solutions where we would not use an addon but could still teach about a relatively simple service while doing mapping?

[jaredgalanis]

Thanks @acorncom, I see your point. I suppose we could make use of the leaflet.js library itself in a service similar to the one we have in the tutorial already?

[toddjordan]

@jaredgalanis have you looked at this as of late? To answer your question if you haven't already got one is yes. We can invoke leaflet in a service, similar to the way we call google through a service.

[jaredgalanis]

Thanks @toddjordan. Had not received one yet. Although, that's not the hold up. I still plan on getting to this though.

[toddjordan]

awesome. Thanks!

[toddjordan]

I had some time this week and have bene working on it. PR shortly.

[jaredgalanis]

Thanks @toddjordan. Apologies this one went stale.

[toddjordan]

np ❤️ We'll dock it from your pay 😉

[toddjordan]

Made some progress on the maps front:
Will need to to a bit of refactoring on it before putting it in as there's quite a bit of interaction with the api that I don't want to get into with the tutorial. Will try to push it to the addon, but it may remove the need to get into utils classes.

[toddjordan]

Merged #110 to replace google with leaflet