グーグルマップを表示し、クリックしたらマーカーをつけ、また、座標、ズームの値を取得する。

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();
}