-2

1 つのページに複数のカスタム Google マップを表示しようとしましたが、以下に示すように、1 つが表示されていると、もう 1 つがバグっています。ここに画像の説明を入力

両方のコンテナーが正しいサイズに収まっているため (そして、Google のロゴと「利用規約」が正しく表示されているため)、私のコードから来ているようには感じません。ただし、「マップ タイル」は 2 番目のマップには表示されず、代わりに灰色の背景が適用されます。

アイデア/提案はありますか？

編集: 最初のマップは常に表示され、他のマップは常にバグっているようです。

4

2 に答える 2

0

@Andyのソリューションと私のソリューションが混在している問題を修正する方法をついに見つけました。resizeイベントは実際にトリガーされる必要がありますが、以下に示すように、ズーム レベルとマップの中心が正しく表示されません。

ここに画像の説明を入力

ズーム レベルと中心を更新するには、マップ マーカーに応じてマップの境界を更新するこの自家製の方法を使用します。

var updateBounds = function ( map, markers ) {
    var bounds = new google.maps.LatLngBounds();

    for ( var i = 0, len = markers.length ; i < len ; i++ ) {
        bounds.extend ( markers[i].marker.position );
    }

    // extend bounds using two invisible markers so the markers don't get too close to the map borders
    var
        extendPoint1 = new google.maps.LatLng ( bounds.getNorthEast().lat() + 0.001, bounds.getNorthEast().lng() + 0.001 ),
        extendPoint2 = new google.maps.LatLng ( bounds.getNorthEast().lat() - 0.001, bounds.getNorthEast().lng() - 0.001 );

    bounds.extend ( extendPoint1 );
    bounds.extend ( extendPoint2 );

    map.fitBounds ( bounds );
};
于 2013-11-05T10:22:26.260 に答える