ページに埋め込む形のGoogle Mapにおいて複数のマーカーを立てておき、マーカーがクリックされたらマーカーの座標を中心にしてズームインされるようにします。
ただ、ズームインされた状態だと他のマーカーをクリックするにはズームアウトしなければならないので、それをせずに他のマーカーの場所を表示出来るよう、マップ外に全マーカーのドロップダウンリストを設置しました。
また、マーカーをクリックした際に、ドロップダウンリストの該当するマーカーのリストアイテムが選択されるようにします。
完成イメージ
複数のマーカーとマーカーのリストが表示される。
マーカーをクリックするかリスト内のアイテムを選択すると、ズームインされる。マーカーをクリックした場合は、該当するマーカーのリストアイテムが自動的に選択される。
ソースコード
雑に書いたので綺麗なコードではありませんが、是非ブラッシュアップして使って下さい。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 80%;
width: 100%;
}
html, body {
height: 100%;
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div>
<form name="foo">
<select id="marker_select_listbox" name="marker_list" onChange="displayBaloon_byList()"></select>
</form>
</div>
<div id="map"></div>
<script>
var map, marker = [], infoWindow = [], old_marker = 0, dropdown_item;
function initMap() {
var myLatlng = {lat: 35.0, lng: 136.0}; // 初期座標
var markerData = [ // マーカーを立てる場所名・緯度・経度
{
name: 'マーカータイトル',
lat: 35.0,
lng: 135.0
}, {
name: 'マーカータイトル',
lat: 35.0,
lng: 136.0
}, {
name: 'マーカータイトル',
lat: 35.0,
lng: 137.0
}
];
// 地図を表示
map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 8 //初期ズーム倍率
});
// ドロップダウンリストの1行名に空白行を追加
$("#marker_select_listbox").append('<option value=""></option>');
// マーカー毎の処理
for (var i = 0; i < markerData.length; i++) {
markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成
marker[i] = new google.maps.Marker({ // マーカーの追加
position: markerLatLng, // マーカーを立てる位置を指定
map: map // マーカーを立てる地図を指定
});
infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
content: '<div class="sample">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容
});
markerEvent(i); // マーカーにクリックイベントを追加
/* マーカーのアイコンを変更する場合、下記を使用する
marker[i].setOptions({ // マーカーのオプション設定
icon: {
url: 'マーカー画像へのURL', // マーカーの画像を変更
scaledSize: new google.maps.Size( 40, 40 ) // マーカーのサイズを変更
}
});
*/
// 切替選択して吹き出しを表示するドロップダウンリストのアイテムを追加
let controlTag_list = "<option value="${i},${markerData[i]['lat']},${markerData[i]['lng']}">${markerData[i]['name']}</option>";
$("#marker_select_listbox").append(controlTag_list);
}
// マーカーにクリックイベントを追加
function markerEvent(i) {
marker[i].addListener('click', function(e) { // マーカーをクリックしたとき
infoWindow[old_marker].close(); // 前回表示させた吹き出しの非表示
infoWindow[i].open(map, marker[i]); // 吹き出しの表示
dropdown_item = document.getElementById("marker_select_listbox").getElementsByTagName('option');
dropdown_item[i+1].selected = true; // アイテムを選択させる
old_marker = i;
map.setZoom(16); // ズームする
map.setCenter(new google.maps.LatLng(e.latLng.lat(), e.latLng.lng())); // 中心座標にマーカーの座標をセット
});
}
}
//吹き出しを表示する（ドロップダウンリスト切替）
function displayBaloon_byList() {
obj = document.foo.marker_list;
index = obj.selectedIndex;
if (index != 0){
str = obj.options[index].value;
str = str.split(",");
[i, lat, lang] = str;
infoWindow[old_marker].close(); // 前回表示させた吹き出しの非表示
infoWindow[i].open(map, marker[i]); // 吹き出しの表示
old_marker = i;
map.setZoom(16);
map.setCenter(new google.maps.LatLng(lat, lng));
}
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=ここに取得したGoogleMapAPIを記述&callback=initMap"></script>
</body>
</html>参考にしたサイト：
- https://developers.google.com/maps/documentation/javascript/examples/event-simple?hl=ja
- https://www.tam-tam.co.jp/tipsnote/javascript/post7755.html
