2012-06-26 3 views
7

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.Google Maps API V3 Graue Bereiche

enter image description here

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.

Antwort

8

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'); 
     }); 
    }); 
}); 

+0

Danke für die schnelle Antwort. Ich bin mir sicher, dass ich etwas falsch mache, aber so habe ich es im Moment. ' ' – itsbc

+1

Hier sind zwei mögliche Probleme; Zunächst scheint Ihre Map-Variable nicht global zu sein, also können keine anderen Funktionen sie verwenden, und zweitens, nachdem das 'slideToggle()' beendet ist, müssen Sie die Größenänderung auslösen. –

+0

Ich bin sehr Anfänger zu jquery und ich bin nicht 100% klar, wie das globale Problem in Bezug auf die Map-Variable zu beheben. Deklariere ich es einfach mit var map = "map"? Danke nochmal für die Hilfe. – itsbc

0

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!