Vị trí bản đồ Google không chính xác khi tải

Question

Tôi đang gặp sự cố với bản đồ Google có khung. Về cơ bản, vị trí không đúng, nhưng không phải lúc nào. Tôi nghĩ rằng vấn đề có thể có một cái gì đó để làm với thực tế là bản đồ là trong một div ẩn, được hiển thị sau đó.

Ai đó có thể xác minh rằng đây thực sự là vấn đề hay đề xuất giải pháp cho vấn đề này? Tôi không có nhiều quyền kiểm soát trên bản đồ, vì nó là iframed từ một nơi khác.

Tôi đã cố gắng cung cấp cho ID iframe, sau đó tôi nhắm mục tiêu với google.maps.event.trigger(map, "resize"); trên chức năng tiết lộ vùng chứa gốc, nhưng không có kết quả.

EDIT
Theo yêu cầu, đây là bản đồ:

<iframe width="450" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=56.084298,11.074219&amp;z=6&amp;output=embed"></iframe> 

Như bạn thấy, có nothin đặc biệt về nó. Đó là nghĩa vụ phải hiển thị Đan Mạch, nhưng nó một số lần hiển thị Đức và Ba Lan để thay thế. Tôi chắc chắn đó là những nơi tốt đẹp, nhưng khách hàng thấy ít sử dụng nó.

Answer 1

Tôi cũng có thể xác nhận sự cố này. Tôi không nghĩ rằng nó liên quan đến div ẩn của bạn, vì tôi có vấn đề với các yếu tố cố định.

Vấn đề là địa điểm bạn muốn bản đồ tập trung vào kết thúc ở góc trên cùng bên trái của khung nội tuyến vì một lý do nào đó. Tôi nghĩ rằng đó là bởi vì trên mặt google của sự kiện thay đổi kích thước bản đồ là bắn quá sớm trước khi nó biết kích thước đầy đủ của iFrame.

Hãy thử điều này, cho đến nay nó làm việc cho tôi:

1. Tháo thẻ iframe src.

2. Nhúng dưới đây mã javascript ở đâu đó dưới iframe:

   <script type='text/javascript'> 
       jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc...."); 
   </script> 
   

Bởi vì nó tải các bản đồ sau khi iframe là ở đó. Nếu tôi vẫn gặp sự cố trong tương lai, tôi sẽ thử thêm một khoảng thời gian trễ ngắn vào mã trên, làm cho nó chạy sau khi tải tài liệu.

Answer 2

Sự kiện "thay đổi kích thước" sẽ lấy đối tượng bản đồ làm đối số chứ không phải là id. Vì bạn đang sử dụng maps.google.com trong iframe, tôi không tin rằng có thể truy cập đối tượng bản đồ thực tế.

Thật không may, tôi nghĩ câu trả lời hay nhất là chuyển sang sử dụng triển khai đơn giản API Google Maps v3 thay vì nhúng maps.google.com vào khung nội tuyến. Điều này sẽ cho phép bạn kích hoạt "thay đổi kích thước" chính xác khi cần, vì bạn sẽ có quyền truy cập vào đối tượng bản đồ.

Đây là tài liệu hướng dẫn: http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Thiết lập thực hiện đơn giản như ví dụ sau: http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

Sau đó rời khỏi cuộc gọi của bạn để google.maps.event.trigger (bản đồ, "thay đổi kích thước"); khi bạn hiển thị vùng chứa ẩn.

Answer 3

Có thể xác nhận rằng tôi đã gặp sự cố này khi hiển thị hai bản đồ trong các div 'được tab'. I E. một tải div bị ẩn.Cách đơn giản nhất tôi đã tìm thấy để vượt qua vấn đề chỉ đơn giản là sử dụng một chút thử nghiệm và lỗi và bù đắp bản đồ trước khi sao chép và dán mã nhúng, để bù đắp cho bù đắp bản đồ sai lầm. Nhưng chỉ cần nhớ để lại các liên kết bên ngoài (liên kết bên dưới bản đồ google bên ngoài) như bản gốc href nếu không bản đồ này sẽ được bù đắp quá.

Answer 4

Giải pháp đơn giản:

1. Đặt iframe bên trong một div với id = "bản đồ".
2. Không ẩn div vì bản đồ sẽ được tạo sai.

3. Đặt div tuyệt đối, 10.000 pixel ở bên trái. Trong trường hợp này bản đồ sẽ không nằm trên màn hình, nhưng sẽ được tải.

   jQuery ('# map'). Css ({"position": "absolute", "left": "- 10000px"});

4. Khi bạn nhấp vào nút để hiển thị tiện ích bản đồ:

   jQuery('#map').show(); jQuery('#map').css({"position":"static"}); 
   

5. Để ẩn div add:.

   jQuery ('# bản đồ') ẩn();

Answer 5

Tôi đề nghị tải bản đồ với một số thời gian trễ sau khi kiểm tra div có thể nhìn thấy hay không sẽ giữ bản đồ. Đã làm việc cho tôi

$(document).ready(function() { 
     $('.togglebtn').click(function() { 

if(!$('#map_canvas').is(':visible')){ 
       setTimeout(function(){initialize()}, 500); 
       } 
    }); 
}); 


    //your function 
function initialize() { 


     var mapOptions = { 
      zoom: 3, 
      center : new google.map.LatLng(31.510474,80.352287), 
      center: new google.maps.LatLng(44.510474, 50.352287), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     var contentSC_PAK = "SoftCircles Pakistan"; 
     ..... 
     ..... 

     and rest of your map code to initialize map 



     }); 

    } 

Answer 6

Tôi đề xuất bản đồ tải với một thời gian trễ sau khi kiểm tra div có thể nhìn thấy hoặc không giữ được bản đồ. Hãy thử một lần !

$(document).ready(function() { 
     $('.togglebtn').click(function() { 

if(!$('#map_canvas').is(':visible')){ 
       setTimeout(function(){initialize()}, 500); 
       } 
    }); 
}); 


    //your function 
function initialize() { 


     var mapOptions = { 
      zoom: 3, 
      center : new google.map.LatLng(31.510474,80.352287), 
      center: new google.maps.LatLng(44.510474, 50.352287), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     var contentSC_PAK = "SoftCircles Pakistan"; 
     ..... 
     ..... 

     and rest of your map code to initialize map 



     }); 

    } 

Answer 7

Cái này không làm việc cho tôi:

jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc...."); 

... vì vậy tôi đã phải tìm một cách khác để giải quyết vấn đề này.

Vấn đề của tôi là tôi đã có một <div> đó là display: none, và trở thành có thể nhìn thấy cách này sau 2,5 giây như thế này:

setTimeout(function() { 
    $("#contents") 
    .css({opacity: 0}).fadeIn() 
    .animate({opacity:1}, 1000, function() { 
    }); 
}, 2500); 

Và tôi muốn bản đồ Google để được hiển thị trong #contents, và Tôi đã có cùng một vấn đề mà các điểm đánh dấu màu đỏ là ở góc trên bên trái.

Vì vậy, tôi đã thêm <div id="map"></div> vào trang.

Sau đó, tôi thêm vào những thứ iframe trong một file php gọi map.php, và tôi đã thêm dòng jquery này dưới đây:

setTimeout(function() { 
    $("#map").load('map.php'); 
}, 2500); 

Vì vậy, nó nạp các map.php với iframe vào div với id map. Nó hoạt động hoàn hảo.