Monaca Onsen UI Discord Chat Github Repo

[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 ( == "page2") {
     }, false);
    <ons-template id="page2.html">
    			  <div class="left"><ons-back-button>Back</ons-back-button></div>
    			  <div class="center">Page 2</div>
             <div id="map" class="map"></div>   

    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 your mapateste() would show that it’s not being executed.

    The if condition is failing because the ons-page doesn’t have the proper id. 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: