Die Karte ist nicht die ganze Zeit zentriert

Question

Ich benutze den folgenden Code, um die Karte zu zentrieren und damit den Marker in der Mitte zu bekommen. Das Problem ist, dass sich der Marker meistens in der oberen linken Ecke befindet und wenn ich hinein- und hinauszoomiere, ist der Marker wieder in der oberen linken Ecke.

Was ist los? Sie können das Problem/Website live unter erik-edgren.nu/weather sehen.

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(/\./, '')); 
} 

Vielen Dank im Voraus!

Answer 1

Stellen Sie sicher, dass Sie explizit eine Größe für das div-Element map_canvas festlegen. Dieses Problem ist bei bestimmten Browsern aufgetreten, als ich es versehentlich ausgelassen habe.

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

Vom API docs:

Beachten Sie, dass die Karte immer seine Größe übernehmen von der sein enthaltenden Elements, so müssen Sie immer eine Größe auf diesen explizit festgelegt.