Maps on pages

[patch]

Hello,
I m creating a simple mobile app.
On the index, google maps works perfectly.
But when i try to insert google maps on a second page (using framework7), only a grey square appear.
I think it s a problem of transparency but not sure.
I ve tried a lot a different solutions but nothing is working
Is anybody have a solution or just a code?
Thank you

this my code

Back

Map

 <div id="map_canvas">

#map_canvas { width: 100%; height: 500px; background-color: #0f0f0f; }

[albert]

Hello @patch I am having the same problem. Did you find a solution by any chance?

[patch]

Hi @albert
Unfortunately no

[senaria]

@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.