グーグルマップを表示し、クリックしたらマーカーをつけ、また、座標、ズームの値を取得する。
var markers = null; // マーカーのオブジェクト
function initMap() {
// マップの初期化
var map = new google.maps.Map(document.getElementById('#表示する要素ID'), {
zoom: 13,
center: {lat: 36.38992, lng: 139.06065}
});
// クリックイベントを追加
map.addListener('click', function(e) {
getClickLatLng(e.latLng, map);
});
// ズームイベントを追加
map.addListener('zoom_changed', function() {
getMapZoom(map);
});
}
function getClickLatLng(lat_lng, map) {
// 前のマーカーを消す
if(markers != null) {
markers.setMap(null);
}
// 座標を表示
document.getElementById('lat').textContent = lat_lng.lat();
document.getElementById('lng').textContent = lat_lng.lng();
// マーカーを設置
markers = new google.maps.Marker({
position: lat_lng,
map: map
});
// 座標の中心をずらす
map.panTo(lat_lng);
}
function getMapZoom(map) {
document.getElementById('lng').textContent = map.getZoom();
}