Simple Google Maps Api integration with Ember.js

Objective: To display a google map widget on SPA web page created using Ember.Js

Ok this is simple. On your (SPA) html page (I will be using index.html) do the following:

  <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=<your key-here>&sensor=false">
    </script>

Now in app.js define a view like this:

App.MapView = Ember.ContainerView.extend({

  id: 'map-canvas',

  tagName: 'div',

  attributeBindings: ['style'],

  style:"height: 200px; ",

  

  map:null,

  didInsertElement: function() {

    var mapOptions = {

      center: new google.maps.LatLng(28.405765,77.049479),

      zoom: 13,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    var map = new google.maps.Map(this.$().get(0),mapOptions);

    this.set("map",map);

  }

});

Please note I have defined id as map-canvas for the tagName div. This will be the id of the tag name my div where the map is displayed.

Now in your spa page select where you want to show the view
So in the main template you can add the view

 {{#view App.MapView contentBinding="this"}}
      <div id="map-canvas"/>
      {{/view}}

This will call the mapView and display the map in the div of id map-canvas.



** The author of this blog is looking for a job! If you can trust his solution, you can probably hire him too :), **