지도가 항상 중앙에 있지 않습니다.

Question

다음 코드를 사용하여지도를 가운데 맞추기 때문에 중앙에 마커가 표시됩니다. 문제는 마커가 대부분 왼쪽 위 모서리에 있고 확대 및 축소하면 마커가 다시 왼쪽 상단 모서리에 표시된다는 것입니다.

무엇이 잘못 되었나요? erik-edgren.nu/weather에서 문제/사이트 라이브를 볼 수 있습니다.

function initialize_map() { 
    var myOptions = { 
     zoom: 4, 
     mapTypeControl: true, 
     navigationControl: true, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     }, 
     streetViewControl: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
} 

function initialize() { 
    $('#map_canvas').hide(); 

    if(geo_position_js.init()) { 
     $('#current').html('Söker efter din plats. Var god vänta...'); 
     geo_position_js.getCurrentPosition(show_position, function() { 
      $('#current').html('Kunde tyvärr inte hitta din position.'); 
     }, { 
      enableHighAccuracy: true 
     }); 
    } else { 
     $('#current').html('Det verkar som att din webbläsare inte tillåter att webbsidan hämtar din position. Ta en titt i webbläsarens inställningar för att se om denna funktion är igång eller inte, och försök sedan igen.'); 
    } 
} 

function show_position(p) { 
    $('#current').html(''); 
    $('#map_canvas').show(); 

    var pos = new google.maps.LatLng(p.coords.latitude, p.coords.longitude); 
    map.setCenter(pos); 
    map.setZoom(10); 

    var marker = new google.maps.Marker({ 
     position: pos, 
     map: map 
    }); 

    $('#weather-data').load('weather-set.php?lat=' + p.coords.latitude.toFixed(6).replace(/\./, '') + '&long=' + p.coords.longitude.toFixed(6).replace(/\./, '')); 
} 

미리 감사드립니다.

Answer 1

map_canvas div 요소에 명시 적으로 크기를 설정했는지 확인하십시오. 실수로 특정 브라우저에서이 문제가 발생했습니다. API docs에서

<div id="map_canvas" style="width: 100%; height: 100%"></div> 

:지도는 항상 포함 된 요소의 크기를 취할 것입니다, 그래서 당신은 항상 명시 적으로 에 크기를 설정해야

참고.