How to bind a map interface with ember.js?

@aubrey 

To bind a map interface with Ember.js, you can follow these steps:

1. Install the ember-g-map addon by running the following command in your Ember project directory:

1

ember install ember-g-map

1. Set up the Google Maps API key in your config/environment.js file:

1
2
3

ENV['ember-g-map'] = {
  apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
};

1. Create a component to render the map on your template. For example, you can create a google-map component like this:

1
2

// app/templates/components/google-map.hbs
{{yield}}

1. Use the g-map-marker component to display markers on the map. You can pass latitude and longitude coordinates as arguments to the component:

1
2
3

<g-map @lat={{latitude}} @lng={{longitude}} as |map|>
  <map.g-map-marker @lat={{latitude}} @lng={{longitude}} />
</g-map>

1. You can also bind the map markers to a model or array in your Ember.js application. For example, you can create an array of locations in your component or controller and loop through them to display multiple markers on the map:

1
2
3
4
5
6
7

locations: Ember.computed(function() {
  return [
    { lat: 37.7749, lng: -122.4194 }, // San Francisco
    { lat: 40.7128, lng: -74.0060 }, // New York
    // Add more locations here
  ];
})

1. Update the template to loop through the locations array and display markers for each location:

1
2
3

{{#each locations as |location|}}
  <map.g-map-marker @lat={{location.lat}} @lng={{location.lng}} />
{{/each}}

With these steps, you can bind a map interface with Ember.js using the ember-g-map addon and display markers on the map based on your application data.