Google Maps API V3グレーエリア

Question

Google Maps API V3をインストールしましたが、サイズ変更機能が正しく動作するようになっていません。私は、リンクをクリックしたときにドロップダウンするディビジョンにマップを表示するためにスクリプトを配置しましたが、側面にグレーの領域が表示されます。私は、私が理解できるものから、ディビジョンを表示するスクリプトでサイズ変更機能を持たなければならないインスタンスを読んだが、正しく実装するのに問題がある。

ここで明らかにされるように分割（クラス=「コンテンツ」）を引き起こすコードは次のとおり

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

IはID「マップ」とDIVの内部マップを有しています。

<div class="map"> 
     <div id="map_canvas""></div> 
    </div> 

私は一晩中サイトの他の部分で作業していましたが、現時点でかなり分散しています。私はこれを解決するために必要なものを投稿するのを忘れた場合は申し訳ありません。

Bc。

Answer 1

Googleマップに手動でサイズを変更する必要があります。

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

。

更新は

<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> 

その後、次のコードに変更することができます。

$(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

ねえ、私はこれに素早く簡単に修正を実現：

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

"map"と呼ばれるページdivと "map-canvas"と呼ばれるマップdiv。

これは、ページが表示されているときにマップを初期化すると思われます。これは、ユーザーが地図を読み込んだときに地図を読み込むことでアプリの処理速度を落としますが、DOMなどで発生するエラーを回避します。これは、私のphonegap + jquery mobile + google mapアプリで、コーナードマップ/グレーエリアの問題を完全に修正しました！