[Onsen UI 1 and 2] Why the google map/ or leaflet does not appear on other pages without being on the main template.
-
I have a project with three page templates that have the home, page1 and page2 and I want to show the map on page2 but the map only appears on the home page.
How do I make the map appear in page2?
I used this code to get the id of the template but doesn’t work
document.addEventListener("show", function (event) { if (event.target.id == "page2") { mapateste(); } }, false);
<ons-template id="page2.html"> <ons-page> <ons-toolbar> <div class="left"><ons-back-button>Back</ons-back-button></div> <div class="center">Page 2</div> </ons-toolbar> <div id="map" class="map"></div> </ons-page> </ons-template>
The code doesn’t show any error but the map doesn’t appear on page2.
-
Hi @magestik. When debugging usually it’s nice to test whether your code is being executed :wink:
Otherwise it’s possible to waste a lot of time making changes without much progress.
In your case a
console.log('test');
right before yourmapateste()
would show that it’s not being executed.The
if
condition is failing because theons-page
doesn’t have the properid
. Add<ons-page id="page2">
and you should be good to go :walking:
-
Thank’s for your reply I made some changes like putting page id an changging the “show” event to “pageinit” and it’s working now :smile: