Google Maps API V3 Graue Bereiche

Question

Ich habe Google Maps API V3 installiert, habe aber Probleme, die Größenänderungsfunktion ordnungsgemäß zu verwenden. Ich habe das Skript so platziert, dass die Karte in einer Unterteilung angezeigt wird, die beim Klicken auf eine Verknüpfung nicht angezeigt wird. Es werden jedoch graue Bereiche an den Seiten angezeigt. Ich habe Instanzen gelesen, in denen Sie die Größenänderungsfunktion in dem Skript haben müssen, das die Division anzeigt, von dem, was ich verstehen kann, aber ich habe Probleme, es richtig zu implementieren.

Hier ist der Code, der die Teilung (class = "content") offenbart werden verursacht:

$(function() { 
$('.action').click(function() {   
    var name = $(this).attr("name"); 
    var content = $('.content[name=' + name + ']'); 
    $('.content').not(content).hide('fast'); 
    content.slideToggle('fast'); 
}); 

ich die Karte mit der ID "Karte" innerhalb eines div haben.

Ich habe die ganze Nacht auf anderen Teilen der Website gearbeitet und bin im Moment ziemlich schusselig. Entschuldigung, wenn ich vergessen habe, etwas zu posten, um dieses Problem zu lösen.

Vielen Dank im Voraus, Bc.

Answer 1

Sie müssen die gleichmäßige Größe auf der Google-Karte manuell werfen.

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

Reference.

aktualisieren

<script type="text/javascript"> 
// Global Variable 
var map; 

// This is a global Function 
function initialize() 
{ 
    // This variable is scoped only for the initialize function, 
    // it is not available to other functions scoped globally 
    var myOptions = 
    { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Instead of a function scoped map variable this should be global 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    google.maps.event.trigger(map, 'resize') 
} 
</script> 

Dann können Sie den folgenden Code ändern:

$(function() 
{ 
    $('.action').click(function() 
    {   
    var name = $(this).attr("name"); 
    var content = $('.content[name=' + name + ']'); 
    $('.content').not(content).hide('fast'); 
    // this uses the callback functionality 
    // to only throw the trigger after the 
    // animation finishes. 
    content.slideToggle('fast', 
     function() 
     { 
     google.maps.event.trigger(map, 'resize'); 
     }); 
    }); 
}); 

Answer 2

Hey erkannte ich eine schnelle einfache Lösung dazu:

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(42.365885, -71.258658), 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    google.maps.event.trigger(map,'resize'); 
} 

$(document).on("pageshow", "#map", function() { 
    initialize(); 
}); 

mit der Seite div namens "map" und der Karte div namens "map-canvas".

Dies scheint zu initialisieren die Karte, wenn die Seite angezeigt wird. Dadurch wird Ihre App langsamer, da die Karte geladen wird, wenn der Benutzer sie öffnet. Dadurch werden jedoch Fehler vermieden, die durch das Dom verursacht werden. Dies behebt das Problem mit der Karte/Grauzonen auf meiner phonegap + jquery mobile + google map App!