发表新帖
发表新帖

JQuery Mobile and Google Maps Not Rendering Correctly

后端 未结
关注
5 2035
星月不相逢
星月不相逢 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)
  • -上瘾入骨i
    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)
  • 慢半拍i
    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)
 看不清?
提交回复
热议问题