Bản đồ Google trong div ẩn

Question

Tôi có một trang với hai tab. Tab đầu tiên có ảnh và thứ hai là bản đồ google. Vấn đề là bản đồ google không hoàn toàn vẽ vì nó nằm trong div ẩn. Vì vậy, tôi đã chuyển hàm initialize() vào href của thẻ bản đồ bằng cách sử dụng onclick(). Điều này hoạt động lần đầu tiên bạn nhấp vào nó nhưng khi bạn quay lại tab ảnh và sau đó quay trở lại tab bản đồ, bản đồ chỉ vẽ một phần. Nếu bạn nhấp vào tab bản đồ lần thứ hai thì nó hoạt động hoàn hảo. Bất kỳ ý tưởng?

tab javascript:

<script type="text/javascript"> 

$(function() { 
    var tabContainers = $('div.tabs > div'); 

    $('div.tabs ul.tabNavigation a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.tabs ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
}); 

</script> 

google maps javascript:

<script type="text/javascript"> 
    function initialize() { 
    var latlng = new google.maps.LatLng(<?=$lat ?>, <?=$lng ?>); 
    var myOptions = { 
     zoom: 15, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title:"<?=$fulladdress ?>" 
    }); 
} 
</script> 

html:

<div class="tabs"> 
     <ul class="tabNavigation"> 
      <li><a href="#first">Photos</a></li> 
      <li><a href="#map_canvas" onclick="initialize(); return false;">Map</a></li> 
     </ul> 


     <div id="first"> </div> 
     <div id="map_canvas" ></div> 

Answer 1

Tôi đã nhìn thấy điều này trước khi bạn cần phải thay đổi kích thước bản đồ:

google.maps.event.trigger(map, 'resize'); 
map.setZoom(map.getZoom()); 

.210

này là dành cho V3:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Một chút biết thêm:

https://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2?pli=1

Answer 2

Bằng cách làm theo các liên kết được cung cấp từ Pete, tôi đã có thể giải quyết đó.

Bạn có thể có hàm gọi là calcRoute(). Bạn có thể cần phải kích hoạt chức năng này hai lần. Lúc đầu, khi nó được kích hoạt nó tải tốt, nhưng bạn có thể cần phải kích hoạt lại chức năng đó khi bạn thay đổi tab. Điều đó sẽ hoạt động!

Answer 3

này làm việc cho tôi:

google.maps.event.trigger(map, 'resize'); 

nhưng, sau khi tab được hiển thị ...

$('a[href="#mytab"]').on('shown', function (e){ 
     google.maps.event.trigger(map, 'resize'); moveTo(); 
    }); // realocate the map 

Tôi đang sử dụng bootstrap, tìm ra chức năng tương tự trong jquery UI.

Answer 4

Tôi đã làm việc này bằng cách ràng buộc việc thay đổi kích thước bản đồ thành bộ điều khiển mà hiện ra một vùng chứa phần. Phần quan trọng ở đây vì nó liên quan đến việc cần phải bấm hai lần để thay đổi kích thước bản đồ nằm trong bit setTimeout. Điều đó sẽ cung cấp đủ độ trễ để cho phép chiều rộng được tính toán trên trình bao bọc xung quanh bản đồ.

/** 
* This example will work with foundation 4 sections. However, the idea is the same for any collapsed map. 
* Load a map object 
* Find it's parent (which is hidden) 
* Bind a click event to the element which 'unhides' your container 
* */ 
(function($) { 
    Drupal.behaviors.foundationCollapseHack = { 
     attach: function(context, settings) { 
      // check whether we have a map 
      if(typeof settings.vrListingMap != 'undefined') { 
       // on page load 
       $(window).load(function() { 
       // grab a map object 
       var map = Drupal.behaviors.vrwebListingMaps.map; 
       // if we have a section container 
       if($(map.b).parents('.section-container').length > 0) { 
        // find any maps in these tabs and bind a click to it 
        $(map.b).parents('section').find('p.title').children('a').click(function() { 
         // B.c of timing - it's important to wrap the resize stuff in a timeOut. 
         // This assures that getComputedStyle is not null when resize fires 
         setTimeout(function() { 
          var coord = map.getCenter(); 
          google.maps.event.trigger(map, "resize"); 
          map.setCenter(new google.maps.LatLng(coord.lat(), coord.lng()), settings.vrListingMap.options.default_zoom);  
         }, 0); 
        }); 
        } 
       }); 
      } 
     } 
    } 

})(jQuery); 

Answer 5

Sau một ngày đấu tranh với điều này, tôi đã theo dõi liên kết của người hỏi với vấn đề của mình.

tôi thấy đoạn này một số nhiều lần

google.maps.event.trigger(map, 'resize'); 

và tôi chỉ không thể tìm đúng nơi để chèn đoạn mã này. Là một newbie trong lập trình, tôi đã thử tất cả mọi nơi, bao gồm sau init, sau khi gọi bản đồ, ở khắp mọi nơi. Không có gì hiệu quả.

Sau đó, tôi quyết định theo dõi một tình huống thực tế, người thực sự đã đặt câu hỏi này. Đây là những gì ông đã làm, làm việc cho anh ta hoặc cô ấy và nó cũng làm việc cho tôi.Tôi đã làm một thay đổi nhỏ vì nó luôn luôn như thế. Liên kết của anh/cô ấy là một trong những nhận xét.

Adobe DW của tôi không cung cấp tùy chọn này, nhưng ... nó hoạt động. Bạn nên thử trực tiếp trên thẻ neo nơi div bị ẩn. Nó có thể là nơi thích hợp. Gọi init và recenter tại thẻ body (hoặc thẻ anchor). Sau khi bạn nhấp vào bản đồ, nó sẽ tái bản đồ.

<body onclick="initialize(); center_map();"> 

Sau

function initialize { 
.... 

} 

Có này một

<script type="text/javascript"> 
function center_map() { 
var center = map.getCenter(); 
    document.getElementById("your_div_name").style.width = 'auto'; 
    document.getElementById("your_div_name").style.height = '250px'; 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(center); 
} 
</script> 

người mới chú ý từ khắp nơi trên thế giới: thay đổi tên của div trên. Đặt kích thước thật của bạn. Một số người nói rằng bạn cần số thực trong kích thước. Nhưng bất cứ lúc nào bạn nhấp vào bất kỳ phần nào của cơ thể, nó sẽ chạy hàm. Cố gắng cụ thể hơn về chức năng onclick của bạn. Hy vọng điều này sẽ giúp ích cho ai đó.