How to bind google maps using HotTowel?

Question

I am trying to show a simple map in HotTowel.

In home.html page I have that:

<section>
  <div id="map-canvas" data-bind="map: map"></div>
</section>

In home.js I have that:

define(['services/logger'], function (logger) {
  var vm = {
    activate: activate,
    title: 'Home View',
    map: map
};

  return vm;

  function activate() {
    google.maps.event.addDomListener(window, 'load', initialize);
    logger.log('Home View Activated', null, 'home', true);
    return true;
  }

  var map;
  function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  }
});

How to bind model with view to show map?

Answer 1

EDIT**

The below answer was for Durandal 1.2. In durandal 2.0 the viewAttached event was renamed to attached. You can read Durandals documentation about it here.

---

Durandal has a viewAttached event that is called on your viewmodel once the view has been databound and attached to the dom. That would be a good place to call the google maps api.

define(['services/logger'], function (logger) {
  var vm = {
    viewAttached: initialize
    title: 'Home View',
    map: map
};

  return vm;

  var map;
  function initialize(view) {
    logger.log('Home View Activated', null, 'home', true);
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  }
});

EDIT AGAIN to address peoples comments**

As per Jamie Hammond's comment it is a better practice to scope your DOM transversal to the view that's being attached. If the DOM element is apart of the view.

So, inside your viewAttached (in durandal 1.2) or attached (in durandal 2.0) you would:

var map;
var mapOptions = { /*map options*/ };
var vm = {
   attached: function (view) {
       var mapCanvas = $('#map-canvas', view).get(0);
       map = new google.maps.Map(mapCanvas, mapOptions);
   }
}

I haven't messed with Durandal 2.0 at all because I've been pretty busy with work and stuff and when I was messing around with Durandal 1.0 it was just for fun but I do love the framework and hope to one day get to play with 2.0. With that said I did have an issue with generating a map in the viewattached in Durandal 1.0. But, I wasn't using Google maps. I was using Leafletjs. My solution to the problem was creating a delay in the viewAttached that would redraw the map after a short delay. This was because Durandal's transitioning in the view was not working well with leaflets ability to draw the map in the dom element as it was flying and fading in.

So, inside the viewAttached I would draw the map like so:

window.setTimeout(drawMap, 10);

Again, this was a very specific problem I had and not a problem with Durandal. This was more of a problem with Leafletjs not rendering the map correctly when the DOM element was still transitioning in.

Answer 2

Evan,

I'm also trying to get this working but no joy. I have my html as and viewmodel exactly as you have, and I know the viewAttached composition is being called because I'm getting my logger event - but no map!

The only other thing I can think of is where you call your googlemaps from? I'm doing in in my index.html are you doing the same?

Regards