グーグルマップを表示し、クリックしたらマーカーをつけ、また、座標、ズームの値を取得する。
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(); }