JQuery Mobile and Google Maps Not Rendering Correctly

后端 未结 5 2028
星月不相逢
星月不相逢 2021-02-06 00:22

I am simply trying to display a google map within a jquery mobile page. If I load the page directly it works. However, if I navigate to the page from another page it only rend

相关标签:
5条回答
  • 2021-02-06 01:00

    I think the right approach would be to trigger the event when partial tile is loaded once. Below code snippet will help you in achieving that.

    google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
        google.maps.event.trigger(map,'resize');
    });
    
    0 讨论(0)
  • 2021-02-06 01:01

    You have <html> and <body> at 100% size, but not the <div>s in the hierarchy between <body> and <div id="map_canvas">.

    Try adding those to your CSS as well (the content one will need an id).

    You may also need to ensure that the API knows the size of the map <div> by triggering a resize event when everything is ready. Showing only a single tile is a classic symptom of the API getting it wrong (and generally assuming it has zero size).

    0 讨论(0)
  • 2021-02-06 01:08

    Instead of firing a resize, I solved this by wrapping my js in a 'pagecreate' event... like this:

    $(document).on('pagecreate', '#map', function() {
        var mapOptions = {
            center: new google.maps.LatLng(40.773782,-73.974236),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };  
    
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    });
    
    0 讨论(0)
  • 2021-02-06 01:12

    I read on a website that if you have this problem it's beacuse the dom isn't totally loaded when you initialize your google map. You must add this in your code:

    $( document ).bind( "pageshow", function( event, data ){
    google.maps.event.trigger(map, 'resize');
    });
    

    It works for me. It's maybe brutal to resize at every page you show but ... it works.

    0 讨论(0)
  • 2021-02-06 01:22

    I found the issue for me was that JQuery mobile uses Ajax to load the pages. I am not sure if it is the best practice but I simply forced it to load my map page normally by putting the following code in the anchor tag:

    data-ajax="false"
    
    0 讨论(0)
提交回复
热议问题