Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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