)に変更し中央にセット、
地図が移動したときのbounds_changedイベントでセンター座標取得しマーカーをsetPositionで移動させている。地図の中心位置がわかるようにターゲットスコープ（十字アイコン）を表示する方法
マーカーをターゲット画像(gmap_cross.gif)に変更し中央にセット、
地図が移動したときのbounds_changedイベントでセンター座標取得しマーカーをsetPositionで移動させている。
「bounds_changed」イベントは地図の移動中に繰り返し実行され、ターゲットスコープの位置が頻繁書き換えられるので、 高スペックPCであればスムーズに操作に追従するが、低スペック端末では繰り返し処理が負荷になり動作が重くなる可能性がある。 あまりに動作が重い場合は「idle」イベントに変更すれば、 操作中はターゲットスコープが動かず、操作後にターゲットスコープが中央に移動するので操作には追従しなるものの、 繰り返し処理が無いため低スペック端末でも重くなる事がない。
<!DOCTYPE HTML>
<html>
<head>
<style>
#mapdiv { height:400px; width:90%}
</style>
</head>
<body>
<div id="mapdiv"></div>
<script type="text/javascript">
var gmap;
function initMap() {
gmap = new google.maps.Map(document.getElementById('mapdiv'), {
center: {lat: 35.689, lng: 139.692},
zoom: 8
});
//中央に表示するターゲットスコープの画像設定
var tgt_image = {
url: 'gmap_cross.gif', /* 画像ファイル名(32x32 中央16x16) */
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(16, 16)
};
//ターゲットスコープを初期位置にセット
var tgt_marker = new google.maps.Marker({
position: {lat: 35.689, lng: 139.692},
map: gmap,
icon: tgt_image,
clickable: false, /* クリック不可 */
zIndex: 0
});
//ターゲットスコープ表示
tgt_marker.setMap(gmap);
//地図の表示内容が変更されたら、センター座標取得しマーカー座標変更
google.maps.event.addListener( gmap ,'bounds_changed',function(){
var pos = gmap.getCenter();
tgt_marker.setPosition(pos);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap">
</script>
</body>
</html>