Maps on pages

Mobile Apps
4

@patch

I worked with @albert together and we found a solution how we can get the map to work on pages.

Here is what we have done(can be definitly improved but it works):

  1. include the google script inside the head of your index page as usual for scripts
  2. Includ your div on the page where you want it
  3. Go to your app.js and add the following code to the end
// Just initialize the map how you need it
function initializeMap() {
    map = null;
    var latlng;
    latlng = new google.maps.LatLng(37.4419, -122.1419);
    var options = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), options);
}
 /* 
* $$ should be you Dom7 declaration at the top of app.js. 
* For us it did not worked if it was named $, probably a clash with jquery?
*
* Can be probably improved by hooking into a specific page init,  
* then the `findElementById` should not be nneeded
*/
$$(document).on('page:init', function(e) { 
  if (document.findElementById('map_canvas')) {

    initializeMap();
  }

});

The clue is that we only initialise the map when we enter the desired page. Keep in mind that tabs on pages listen to another even tab:init. Therefore the map won’t initialise on page enter because the tab content(e.g. our div) is not visible yet.

If it still not work try to remove the dmx-googe-maps javascript in the head if you have it there. I think it caused problems for us.

Any questions, get in contact.

1 Like