マップのキャンバス(DIV)の幅や高さを％指定するとブラウザのサイズに追従して地図が表示エリアが変わりますが、通常だとマップの左上を原点(固定)として表示エリアが増減 するため、キャンバスの中央にあるマーカーがズレて表示範囲外に消えてしまう事があります。そこで中央を保持した状態でリサイズできる方法を考えてみました。
下記の２つのマップを、ブラウザの幅を拡大縮小（タブレットを縦横表示の切り替え）で幅を変更して比較して下さい。上側が通常版で下側が対策版です。
・通常(左上固定)、縮小しすぎるとマーカーが右端に消えてしまう。
・中央保持してリサイズ、縮小拡大してもマーカーは中央に表示される。
リサイズ前にセンター座標を取得・保持し、リサイズした時にsetCenter()でズレたセンター座標を移動する。
※軽度のバグ：座標保持の取得は移動後の入力待機状態(idleイベント)で行っているため、マップの移動アニメーション中などにリサイズすると1つ前に取得した座標がセンターになる。
<!DOCTYPE HTML>
<html>
<head>
<style>
#map2 { height:300px; width:90%}
</style>
</head>
<body>
<div id="map2"></div>
<script type="text/javascript">
var map_b;
function initMap() {
map_b = new google.maps.Map(document.getElementById('map2'), {
center: {lat: 35.689, lng: 139.691},
zoom: 8
});
var marker = new google.maps.Marker({
position:{lat: 35.689, lng: 139.691},
map: map_b
});
//リサイズ前のセンター座標を保持
var resize_pos=map_b.getCenter();
//移動終了時に保持しているセンター座標を更新
google.maps.event.addListener( map_b ,'idle',function(){
resize_pos = map_b.getCenter();
});
//リサイズ時：マップを再描画し保持していたセンター座標をセット
google.maps.event.addDomListener(window, 'resize',function(){
google.maps.event.trigger( map_b ,'resize');
map_b.setCenter(resize_pos); /* 中央位置をリサイズ前の値に */
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap">
</script>
</body>
</html>
・2016/08/27 公開
・2016/08/28 無駄な処理を一部削除