web-dev-qa-db-ja.com

ブラウザーのサイズ変更（レスポンシブ）でGoogleマップ（V3）を中央に配置

ページの幅が100％で、中央に1つのマーカーがあるGoogleマップ（V3）があります。ブラウザウィンドウの幅のサイズを変更するとき、マップを中央に配置したい（応答する）ようにします。これで、マップはページの左側にとどまり、小さくなります。

更新ダンカンのおかげで、説明どおりに動作するようになりました。これが最終コードです。

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});
javascriptgoogle-mapsgoogle-maps-api-3
123
Gregory Bolkenstijn

ウィンドウのサイズを変更するときのために、イベントリスナーが必要です。これは私のために働いた（あなたの初期化関数に入れてください）：

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
142
duncan

ブラウザのサイズ変更イベントを検出し、中心点を保持しながらGoogleマップのサイズを変更します。

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

他の方法で（たとえば、jQuery-UIの「サイズ変更可能」コントロールを使用して）Googleマップのサイズを変更するときに、他のイベントハンドラーで同じコードを使用できます。

出典： http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ クレジット @ smftre リンク。

注：このコードは、受け入れられた回答に関する@smftreのコメントにリンクされています。受け入れられた答えよりも本当に優れているため、独自の答えとして追加する価値があると思います。これにより、中心点を追跡するためのグローバル変数と、その変数を更新するためのイベントハンドラーが不要になります。

83
William Denniss

W3schools.comの良い例。私は次のものを使用しましたが、うまく機能します。

google.maps.event.addDomListener(window, 'resize', function() {
  map.panTo(myLatlng);
});

http://www.w3schools.com/googleapi/google_maps_events.asp

4
Steve Mulvihill

html：選択したIDでdivを作成します

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

js：マップを作成し、作成したdivに添付します

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

ウィンドウのサイズ変更時に中央に配置

var center = map.getCenter();

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
0
drjorgepolanco

Es6の上記ソリューションを更新しました。

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));
0
David Bradshaw