Ember + Google Map Marker Click

Question

I have a series of Google Map Markers in my Ember App which are created currently in an initializer as they are from a JSON feed and I only ever need to load them once.

Model

App.Service = DS.Model.extend({
     title: DS.attr('string'),
     description: DS.attr('string'),
     type: DS.attr('string'),
     lat: DS.attr('string'),
     lng: DS.attr('string'),
     marker: DS.attr('object')
});

Initializer

Ember.Application.initializer({
  name: "preloadServices", 
  initialize: function(container, application) {

    $.getJSON('../services.page',function(data){
      var services = data.services

        $.each(services,function(index,service){

         if(null != service.lat && null != service.lng){    
             var marker = new google.maps.Marker({
                position: new google.maps.LatLng(service.lat,service.lng),
                map: App.googleMap,
                title: service.title,
                icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'
             });

             var mapService = App.Service.createRecord({
                id: service.id,
                name: service.title,
                type: service.type,
                description: service.description,
                lat: service.lat,
                lng: service.lng,
                marker: marker
            });
         }

        google.maps.event.addListener(marker, 'click', function() {
            //Redirect to service?
            mapService.markerClick();
        });

       });

    App.preloadFinished = true;
    $('#loader-bg').fadeOut(600)
   })

  }
});

The next thing I would like to do is on a marker click route to service.show, currently i've been unable to figure out a way to call a route from anything other that a controller or view. Does anyone have an idea or an alternative way of doing this?

Answer 1

I'm assuming that your initializer runs inside a model hook on a route. So you have access to the same functions within any callbacks created within it. You can use transitionTo inside this closure to do this routing.

var route = this;
google.maps.event.addListener(marker, 'click', function() {
  route.transitionTo('service', mapService);
});

Edit: post clarification

You are doing $.getJSON inside Application initializer. This is asynchronous and isn't what the initializer is for. The initializer is for prepping Ember internals, like the IOC container to inject custom objects, etc.

I would move the code inside this initializer into the beforeModel hook of App.ApplicationRoute . The beforeModel hook is the ideal place for such initialization. This hook can return a promise so, you need to directly return the result of $.getJSON and the router will automatically pause to finish loading.

For the preloader display, use the LoadingRoute .

App.LoadingRoute = Ember.Route.extend({});

with a template called loading , with your markup. Ember will take care of showing/hiding of this template when loading models.

<script type="text/x-handlebars" data-template-name="loading">
  <h1>Loading</h1>
</script>

This will allow you to use route.transitionTo as above.