Ember.JS Routing vs. Google Maps

Question

I'm currently creating a web app with Ember.JS which leverages the Google Maps API to pull locations from a JSON file.

However, the problem in this case, I believe, has something to do with the Ember.JS routing and how JavaScript is being loaded. If I access the page containing the map directly, e.g.: url.com/#/map I will see the map, but if I try to navigate away from this page and then back, the map is gone.

Is it a must to initialize the code in Ember/App.js, or can it be done on the .HTML site as well? If it has something to say, I also use Foundation for the responsive part. Below is how I've done it so far:

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

In ember you have the didInsertElement hook in every view to do just initialization work like this. So to make your map working correctly you should define a MapView and then define the hook, something like this would work:

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

Hope it helps.