Ember.JS Маршрутизация против Google Maps

Question

В настоящее время я создаю веб-приложение с Ember.JS, которое использует API Карт Google для вытаскивания местоположений из файла JSON.

Однако проблема в этом случае, я считаю, имеет какое-то отношение к маршрутизации Ember.JS и тому, как загружается JavaScript. Если я сразу открою страницу, содержащую карту, например: url.com/#/map, я увижу карту, но если я попытаюсь перейти от этой страницы, а затем обратно, карта исчезнет.

Это должно быть для инициализации кода в Ember/App.js, или это может быть сделано на сайте .HTML? Если у него есть что сказать, я также использую Foundation для чувствительной части. Ниже, как я делал это до сих пор:

JavaScript:

<script> 
    function initialize() 
    { 
     var mapProp = { 
      center:new google.maps.LatLng(63.38, 15), 
      zoom:5, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp); 

     var markers = []; 

     var infowindow = new google.maps.InfoWindow(); 

     for (var i = 0; i < locations.length; i++) { 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][6], locations[i][7]), 
       map: map, 
       title: locations[i][0] + " - " + locations[i][1] + ", " + locations[i][2] + " " + locations[i][3], 
       icon: 'img/map_pin_xs.png' 
      }); 

      google.maps.event.addListener(marker, 'mousedown', (function(marker, i) { 
       return function() { 
        infowindow.setContent("<div style='height: 150px;'><span style='font-weight: bold;'>" + locations[i][0] + "</span><br /><span style='font-size: 15px'>" + locations[i][1] + "</span>" + "<br /><span style='font-size: 15px'>" + locations[i][2] + ", " + locations[i][3] + "</span>" + "<br /><a class='aCard' style='font-size: 13px;' target='_blank' href='tel:" + locations[i][4] + "'>" + locations[i][4] +"</a>" + "<br /><span style='font-size: 15px'><a class='aCard' target='_blank' href='" + locations[i][5] + "'>" + locations[i][5] +"</a></span>" + "<hr />" + "<span style='width: 100%'><a class='aCard' style='margin-left: 65px;' href='#' data-reveal-id='BookTime'>Book Time</a></span>" + "</div>"); 

        infowindow.open(map, marker); 
       } 
      })(marker, i)); 

      markers.push(marker); 
     } 


     var mc = new MarkerClusterer(map, markers); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

HTML:

<script type="text/x-handlebars" data-template-name="map"> 
    <div id="map_canvas" class="six columns" style="border-radius: 5px;"></div> 
</script> 

ember.js:

App.Router.map(function() { 
    this.route('home', { path: '/'}); 
    this.route('map'); 
}); 

Answer 1

В ember у вас есть крючок didInsertElement во всех представлениях, чтобы выполнить только инициализацию. Таким образом, чтобы сделать вашу карту работать правильно, вы должны определить MapView, а затем определить крюк, что-то, как это будет работать:

App.MapView = Ember.View.extend({ 
    didInsertElement: function() { 
    // initialization work here 
    } 
}); 

Надеется, что это помогает.