Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ember.js with Google Map in view

I'm trying to display an embeded Google Map based on the location of an Event object.

This is the basic app:

App = Em.Application.create();

App.Event = Em.Object.extend({
    lat: -33.8665433,
    lng: 151.1956316
});

App.EventController = Ember.ObjectController.extend();

App.ApplicationController = Ember.ObjectController.extend();

App.EventView = Ember.View.extend({
    templateName: 'event'
});

App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        event: Ember.Route.extend({
            route: '/',
            connectOutlets: function (router) {
                router.get('eventController').set('content', App.Event.create());
                router.get('applicationController').connectOutlet('event');
            }
        })
    })
});

App.initialize();

With the following templates:

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="event">
    {{lat}} {{lng}}
    // Embeded Google Map
</script>

Where would I initialize the map? Additionally, if lat/lang change, how would I catch it and redraw the map?

Working View Code (Modified from sabithpocker's answer)

App.EventView = Ember.View.extend({
    templateName: 'event',
    map: null,
    latitudeBinding: 'controller.content.lat',
    longitudeBinding: 'controller.content.lng',
    didInsertElement: function () {
        var mapOptions = {
            center: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(this.$().get(0), mapOptions);
        this.set('map', map); //save for future updations
        this.$().css({ width: "400px", height: "400px" });
    },
    reRenderMap: function () {
        if (this.get('map')) {
            var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
            this.get('map').setCenter(newLoc);
        }
    }.observes('latitude', 'longitude') //these are bound to lat/lng of Event
});
like image 973
Mike Davis Avatar asked Sep 03 '12 02:09

Mike Davis


1 Answers

Here is a quick idea, not following ember app structure, just an idea.

App.EventView = Ember.View.extend({
    templateName: 'event',
    map : null,
    latitudeBinding : 'App.Event.lat',
    longitudeBinding : 'App.Evet.lng',
    didInsertElement : function(){
      var mapOptions = {
        center: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
      var map = new google.maps.Map(this.$().get(0),mapOptions);
      this.set('map',map); //save for future updations
    },
    reRenderMap : function(){
      var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
      this.get('map').setCenter(newLoc)
      }.observes('latitude','longitude') //these are bound to lat/lng of Event
});

Also I think App.Event should be:

App.Event = Em.Object.extend({
    lat: null,
    lng: null,
    init : function(){
      this.set('lat', -33.8665433);
      this.set('lng', 151.1956316);
      }
});

to avoid the so-called chromosomal mutation in Ember

like image 86
sabithpocker Avatar answered Nov 08 '22 04:11

sabithpocker