[Onsen UI 1 and 2] Why the google map/ or leaflet does not appear on other pages without being on the main template.

[magestik]

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.

[IliaSky]

Hi @magestik. When debugging usually it’s nice to test whether your code is being executed

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

[magestik]

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