Best way do use Google Maps API in Ember

Design
1

Im wonderin what is the best way (based on your experiences) to use GMaps in your projects.

My current (working) approach is to load the gmaps-script in the index.html like this:

...
<script async defer src="https://maps.googleapi..."></script>
</head>
<body>
  {{content-for 'body'}}
...

and use the api within my own component “map-view” like this:

files

_components
 |_map-view
   |_components.js
   |_template.hbs

content

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement: function() {
  ...
  var map = new google.maps.Map(maptag, options);
  this.set('map', map);
  ...
  }
});

I know there is a plugin out there, but ive got no good feeling using modules instead of doing it on my own way. Especially if they are using an existing library in an “mapping” way. But maybe you would say that this is the better way like my approach.

2

Hi Marc, what would be your question…?

In case you don’t feel comfortable with the add-on you found, there are several others with a similar capability: https://www.emberaddons.com/?query=g-map

If you prefer not to use an add-on, you could look at their source code for inspiration.

2 Likes
3

Hi @emberigniter Thank you for your answer. :slight_smile: My question is “what would you do?” or “do anybody know from experience that my DIY approach can result in problems?”.

I thing thats a good point and I will definitely check out some src’s later! Thanks :slightly_smiling: Anyway: Do you have any experience in using gmaps api in your projects?

4

I’d spring for ember-leaflet

2 Likes
5

I do it with my own component as well. I mean, its about 10 lines of code, no reason to use an addon.

6

:+1: for ember-leaflet - the basic case is simple and is only 10 lines of code, as soon as you want to do anything more advanced like adding in popups etc bound to ember data it becomes a lot more complex

1 Like
7

also, leaflet lets you use better tile sources than google maps, the google maps stuff apparently is very leaky :cry: