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

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

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

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

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

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

ブラウザーのサイズ変更イベントを検出し、中心点を維持しながら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のコメントにリンクされていました。受け入れられた回答よりも優れているため、独自の回答として追加する価値はあると思います。これにより、中心点を追跡するグローバル変数とその変数を更新するイベントハンドラーの必要がなくなります。

w3schools.comのいくつかの良い例。私は以下を使用しました、そしてそれは素晴らしい働きをします。

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

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

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

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

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

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