Google maps api, the maps wont show up. (JQuery mobile)
Question
I've been working on a project for a couple of months now and I've had the google maps api in there. It was working fine until I've added another map. On the original project, one of those maps was loading fine but the second one (on the different page html file) just didn't show the maps (There was the google logo and terms of use and stuff. But not the map) I've decided to recreate the problem just to show it here and it looks like on this version, both of the maps just wont show up.
So what I need to archive:
- Have an index.html
- Have two html files, map1.html and map2.html
- From index.html I can navigate to map1.html by swiping the screen.
- navigate to map2.html by clicking on the link (must have transition)
This is what I have in the original project. I did almost the same thing in the compressed version (problem recreation) except I used just 2 links to navigate to map1.html and map2.html
And neither show the map (only the google logos and stuff).
Here is the code:
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js"></script> <script language="javascript" type="text/javascript" src="./maps.js"></script> </head> <body> <link rel="stylesheet" type="text/css" href="./overCSS/login.css"/> <div data-role="page" id="page1" data-theme="a"> <div data-role="main" class="ui-content"> <h1 align="center">help pl0x?</h1> <ul> <li> <a href="./map1.html" data-transition="slidedown">This link will move to the map1.html</a> </li> <li> <a href="./map2.html" data-transition="slidedown">This link will move to the map2.html</a> </li> </ul> </div> </div> </body> </html>
map1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div data-role="page" id="map1" data-theme="a"> <div id="mapAvailable" style="width: 300px; height: 300px;"></div> <a href="./index.html" data-transition="slidedown">Go back</a> <script> initMap(); </script> </div> </body> </html>
map2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <div data-role="page" id="map2" data-theme="a"> <div id="mapSearch" style="width: 300px; height: 300px;"></div> <a href="./index.html" data-transition="slidedown">Go back</a> <script> initMap(); </script> </div> </body> </html>
maps.js
var mapAvailable; var mapSearch; function initMap() { //init position var latlng = new google.maps.LatLng(31.2535598, 34.7769184); var moptions = { center: latlng, zoom: 13 }; //init map if(document.getElementById('mapAvailable')!= null) { console.log("MapAvailable isn't null"); mapAvailable = new google.maps.Map(document.getElementById('mapAvailable'), moptions); } if(document.getElementById('mapSearch')!= null) { console.log("MapSearch isn't null"); mapSearch = new google.maps.Map(document.getElementById('mapSearch'), moptions); } //Marker var marker = new google.maps.Marker({ position: latlng, mapAvailable: mapAvailable, title: 'Wussup' }); }
Hopefully I gave enough info! Please help me out?
1 answers
solution1
0 2016-01-28 22:18:27
TL;DR
Wrap your initMap(); calls like this:
$('body').on('pagecontainershow', function() {
initMap();
});
What exactly is happening?
To understand what is happening, we have to keep a in mind how navigation occurs within a JQuery Mobile site. When navigation is triggered, the contents of the new page are loaded into the DOM and " the currently visible page is hidden, and another page is shown. Moving from one page to another is accomplished via a transition. "
Everything in the body of the newly loaded page will behave as expected, including the execution of JavaScript. This all occurs as soon as the page is loaded, which happens prior to the page actually transitioning into the viewport and becoming visible. This order of operation is what is causing the issue with the maps.
To improve performance, the Google Maps script does something really clever in that it will only render the part of the map that is initially visible to user. Since the page is not within the viewport when it is loaded and the initMap() function is called, no part of the map div is actually visible. The script sees that, and even though it generates the the map element, it won't load or render any of the actual map within it.
To get the map to load and render completely, we would want to delay calling the initMap() function until the page has completely transitioned into the viewport and is visible. In order to do that we will listen for the "pagecontainershow" event (which is fired after the transition animation has completed for the page) to occur and then call the initMap() function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.