[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 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:


Log in to reply