3. Google Maps not displaying

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.

Google Maps not displaying

  • D

    Hi,

    My first post as I’m new to Onsen UI … it’s great and I’m loving it. I’m sure this is simple but some help would be appreciated. I’m using Monaca tools and have used the google maps plug in and got an API key. Good news is this page works fine:

    <ons-page>
    <style>
    #map {
    height: 100%;
    }
    </style>
    <p> See map below:</p>
    <div id=“map” style=‘height:400px’></div>
    <script>
    var map;
    function initMap() {
    map = new google.maps.Map(document.getElementById(‘map’), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
    });
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap"
    async defer></script>
    </ons-page>

    However, when I call this page from a side-splitter item using loadpage() it doesn’t work. The text appears so the loadpage is working but not the map? The page is called maps.html and the menu on the index.html page is defined as:

    <ons-splitter>
    <!-- The side menu -->
    <ons-splitter-side id=“menu” collapse width=“220px”>
    <ons-list>
    <ons-list-item onclick=“loadPage(‘a.html’)”>
    Quiz
    </ons-list-item>
    <ons-list-item onclick=“loadPage(‘b.html’)”>
    Dulwich College
    </ons-list-item>
    <ons-list-item onclick=“loadPage(‘gallery.html’)”>
    Gallery
    </ons-list-item>
    <ons-list-item onclick=“loadPage(‘maps.html’)”>
    Maps
    </ons-list-item>
    </ons-list>
    </ons-splitter-side>

    An help would be useful. I’ve tried adding an event listener to the map page and running the initMap function then but still to no avail?

    Cheers

    Andrew

    0
  • E
    administrators

    Can you post a full working version somewhere so we can see what’s going on? At the moment, at least the loadPage definition is missing.

    By the way, if you just want to open Google Maps, it might be easier to use the geo URI. For example, you could create a link with an href like this:

    geo:0,0?q=Hitachi+Seaside+Park

    0,0 is the latitude and longitude, and the q= part is a query.
    https://developer.android.com/guide/components/intents-common#Maps

    0
  • D

    Hi,

    Thanks for the reply and sorry for my delay … I’ve setup a GitHub repository and cleaned up the code which I am hoping may help.

    The plan is to hit a toolbar button, move to a new screen, the map loads, the user can drop a pin and the location is stored.

    https://github.com/dracstorey/onsen-map-intergtation-test

    I’ve used Monaca and pushed some files to GitHub.

    index.html has a toolbar. If you hit the left button you get another button and pressing that loads the map.

    If you hit the right button the map doesn’t load.

    Now, I’ve included an index-loads.html file so that you can see that the code from the right hand side works if it is run as part of the index.html file but not as part of a loading page. Given that adding the interim button works I am assuming that the map is trying to load before the page has been pushed onto the navigator stack … but I can’t figure out how to wait until the page has loaded (unless I’ve missed something) before loading the map …

    Thanks for your help.

    Andrew

    0