How to link Google maps using HotTowel?

Question

I am trying to show a simple map in HotTowel.

In the home.html page, I have:

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

In home.js, I have:

 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 associate a model with a map view?

Answer 1

EDIT **

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

---

Durandal has a viewAttached event that fires on your view model after the view has been bound and bound to dom. This would be a good place to call google maps.

 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 respond to peoples comments **

According to Jamie Hammond's comment, it is best to use your DOM transversally to the view in question. If the DOM element is separate from the view.

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

 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 didn't bother with Durandal 2.0 at all, because I was very busy with work and things, and when I fiddled with Durandal 1.0, it was just for fun, but I really love the framework and hope to play with 2.0 someday. With that said, I had a problem creating a map in viewattached in Durandal 1.0. But I did not use Google maps. I used Leafletjs. My solution to the problem was to create a delay in the Attached view, which would redraw the map after a short delay. This was due to the fact that the transition of Durandal from the point of view did not work very well with the ability to flip a map in the dom element, since it was flying and disappearing.

So, inside viewAttached, I would draw a map like this:

 window.setTimeout(drawMap, 10); 

Again, this was a very specific problem that I encountered, and not a problem with Durandal. This was rather a problem, as Leafletjs did not display the map correctly when the DOM element was still transitioning.

Answer 2

Evan

I am also trying to get this work done, but not joy. I have html just like the viewmodel just like you have, and I know that the viewAttached composition is fired because I get my logger event - but there is no map!

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

Hi

Answer 3

BrettH,

For me, the problem was that the height was 0px. My module that works is as follows:

define (['plugins / router', 'knockout', 'plugins / utility'], function (router, ko, utility) {var vm = {}; vm.map = undefined;

 vm.compositionComplete = function () { var myLatlng = new google.maps.LatLng(29.4000, 69.1833); var mapOptions = { zoom: 6, center: myLatlng } vm.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var georssLayer = new google.maps.KmlLayer({ url: 'http://www.visualtravelguide.com/Pakistan-Islamabad.kmz' }); georssLayer.setMap(vm.map); utility.resizeElementHeight(document.getElementById('map-canvas'), 10); $(window).resize(function () { utility.resizeElementHeight(document.getElementById('map-canvas'), 10); }); }; return vm; 

});

My utility module is as follows:

define (['jquery', 'knockout'], function ($, ko) {

 return { //resizes an element so height goes to bottom of screen, got this from a stack overflow //usage: // resizeElementHeight(document.getElementById('projectSelectDiv')); //$(window).resize(function () { // resizeElementHeight(document.getElementById('projectSelectDiv')); //}); //adjustpixels is an optional parameter if you want to leave room at the bottom resizeElementHeight: function (element,adjustPixels) { var height = 0; var adjust = 0; if (adjustPixels != undefined) adjust = adjustPixels; var body = window.document.body; if (window.innerHeight) { height = window.innerHeight; } else if (body.parentElement.clientHeight) { height = body.parentElement.clientHeight; } else if (body && body.clientHeight) { height = body.clientHeight; } element.style.height = ((height - element.offsetTop-adjust) + "px"); }, //looks up name by id, returns blank string if not found //pass in a list and an id (they can be observables) LookupNameById: function (l, wId) { var list = ko.utils.unwrapObservable(l); var id = ko.utils.unwrapObservable(wId); var name = ''; $.each(list, function (key, value) { if (value.Id() == id) name = value.Name(); }); return name; }, //sets the widths of the columns of headertable to those of basetable setHeaderTableWidth: function (headertableid,basetableid) { $("#"+headertableid).width($("#"+basetableid).width()); $("#"+headertableid+" tr th").each(function (i) { $(this).width($($("#"+basetableid+" tr:first td")[i]).width()); }); $("#" + headertableid + " tr td").each(function (i) { $(this).width($($("#" + basetableid + " tr:first td")[i]).width()); }); } }; 

});

Hope this helps you.

Answer 4

first go to your main.js and add 'async': '../Scripts/async',

 require.config({ paths: { 'text': '../Scripts/text', 'durandal': '../Scripts/durandal', 'plugins': '../Scripts/durandal/plugins', 'mapping': '../Scripts/knockout.mapping-latest', 'async': '../Scripts/async', 'transitions': '../Scripts/durandal/transitions' }, shim: { mapping: { deps: ['knockout'] } } }); 

note that we need to add async.js to the scripts folder, so go to Download async.js , upload the file and save it in the hottowel script as async.js

in main.js add this

 // convert Google Maps into an AMD module define('gmaps', ['async!http://maps.google.com/maps/api/js?v=3&sensor=false'], function(){ // return the gmaps namespace for brevity return window.google.maps; }); 

in any viewmodel you can now use it like this

 define(['plugins/router', 'knockout', 'services/logger', 'durandal/app', 'gmaps'], function (router, ko, logger, app, gmaps) { 

Hope this helps: