Cacher is the code snippet organizer for pro developers

https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=ja#MapOptions
https://syncer.jp/google-maps-javascript-api-matome
http://www.webdesignleaves.com/wp/htmlcss/641/

/*! 必須作成インスタンス
=========================================== */
// 1.座標
var latlng = new google.maps.LatLng( 26.350425 , 126.771183 );
// 2.地図
var map = new google.maps.Map(id, mapOptions);
// 3.ピン(オプションのmapでどの地図にmakerを建てるか決めるので地図の次)
var marker = new google.maps.Map(markerOptions);

/*! Mapクラスのオプション
=========================================== */
var id = document.getElementById('map-kumejima');
var latlng = new google.maps.LatLng( 26.350425 , 126.771183 );
/*! Mapクラスのオプション
=========================================== */
var mapOptions = {
    backgroundColor:            '#ddd',                     // 背景色
    center:                     latlng ,                    // 中心座標 [latlng]
    clickableIcons:             false,                      // clickで情報ウィンドウを表示
    disableDefaultUI:           true,                       // 全てのコントロールを無効化
    disableDoubleClickZoom:     false,                      // ダブルクリックでズームを無効化
    draggable:                  true,                       // ドラッグ
    draggableCursor:            url(../img/draggable.png),  // 地図上にてカーソルを変更する
    draggingCursor:             url(../img/draggable.png),  // ドラッグ時のカーソルを変更する
    fullscreenControl:          true,                       // フルスクリーンコントローラー表示
    fullscreenControlOptions:   { postion: google.maps.ControlPosition.RIGHT_BOTTOM },
    gestureHandling:            'auto',                     // cooperative,greedy(2本指操作解除),none
    heading:                    270,                        // 地図タイプが航空写真で、さらに、角度変更に対応している地域でのみ、有効です。
    keyboardShortcuts:          true,                       // キーボードのキーで操作
    mapTypeControl:             false,                      // マップタイプ切替コントローラの表示
    mapTypeControlOptions:      {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, //マップタイプのスタイル設定
    mapTypeId:                  google.maps.MapTypeId.SATELLITE,         //デフォルトはROADMAP
    maxZoom:                    21,                         // 0~21
    minZoom:                    1,                          // 0~21
    noClear:                    true,                       // id内の中の要素をmap生成時に消さない
    panControl:                 true,                       // パンコントロールを表示
    panControlOptions:          { postion: google.maps.ControlPosition.RIGHT_BOTTOM },
    rotateControl:              true,                       //　回転コントロールを表示(ストリートビューモード)
    rotateControlOptions:       { position: google.maps.ControlPosition.RIGHT_BOTTOM },
    scaleControl:               true,                       // スケールコントロールを表示
    scaleControlOptions:        { position: google.maps.ControlPosition.RIGHT_BOTTOM },
    scrollwheel:                true,                       // マウスのホイール操作で縮尺を変更する
    signInControl:              true,                       // サインインコントロールを表示
    streetView:                 google.maps.StreetViewPanorama(), //
    streetViewControl:　        true,                       // ペグマンの表示
    streetViewControlOptions:   { position: google.maps.ControlPosition.RIGHT_BOTTOM },
    styles:                     [{featureType: "all",elementType: "all",stylers: [{ hue: "#00ffcc" }]}];, //stylesOption 長くなるので変数で設定する
    tilt:                       10,                         // 角度を数値で指定
    zoom:                       15 ,                        // ズーム値
    zoomControl:                true,                       // Zoomコントロール表示
    zoomControlOptions:         { position: google.maps.ControlPosition.RIGHT_BOTTOM },
};
var map = new google.maps.Map(id, mapOptions);

/*! Mapクラスのメソッド
=========================================== */
var map = new google.maps.Map(id, mapOptions);
map.fitBounds()
map.getCenter()
map.getZoom()
map.panBy() // 指定したピクセル分だけ現在の中心座標から移動する。
map.panBy()
map.panTo(new google.maps.LatLng(35.173889, 136.908357));



/*! Markerクラスのオプション
=========================================== */
var markerOptions = {
    map: map,   // google.maps.Mapで作成したインスタンス
    position: latlng,

}

/*! Markerクラスのメソッド
=========================================== */
var marker = new google.maps.Map(markerOptions);



/*! よくあるカスタム例
================================================================================================================================= */


/*! 複数の地図を管理する
=========================================== */
// 変数管理
$(function(){
    createMap('mapField01', 26.350425, 126.771183, '久米島', '<p class="map-txt">久米島</p>');
    createMap('mapField02', 34.1, 135.5, 'test', '<p class="map-txt"></p>');
    createMap('mapField03', 35.1, 136.8, 'test', '<p class="map-txt"></p>');
});
// 表示用
function createMap(id, lat, lng, title, content) {
    var centerPosition = new google.maps.LatLng(lat, lng);
    var option = {
        zoom : zoom_size,
        center : centerPosition,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    //地図本体描画
    var googlemap = new google.maps.Map(document.getElementById(id), option);
    //マーカーオプションの指定
    var markerOption = {
        position : centerPosition,
        map : googlemap,
        title : title
    };
    //マーカー追加
    var marker = new google.maps.Marker(markerOption);
    //情報ウインドウオプションの指定
    var infoWindowOption = {
        position : centerPosition,
        pixelOffset: new google.maps.Size(0, -40),
        content : content
    };

    //情報ウインドウ追加
    var infoWindow = new google.maps.InfoWindow(infoWindowOption);
    infoWindow.open(googlemap);
}

/*! resizeで中央を保つ
=========================================== */
$(window).on({
    resize:function(){
        map.panTo(latlng);//既にLatLngインスタンスを作成している場合
        // map.panTo(new google.maps.LatLng(35.173889, 136.908357));
    },
});

<div class="map-wrap">
	<div id="map-kumejima" class="map"></div>
</div>

.map-wrap {
	max-width: 100%;
	width: 100%;
	padding-top: 50%; /* 幅:高さ = 2:1 の地図 */
	height: 0 ;
	margin: 0 ;
	position: relative;
}
.map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}