PetiteTech～初心者向けＩＴ技術学習サイト～

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&language=ja&region=JP"></script>
<script type="text/javascript">
<!--

function mapinit(){
	var centerposition = new google.maps.LatLng(35.683142915306746,139.7524109389633);
	var option = {
		zoom: 13,
		center: centerposition,
	};
	var map = new google.maps.Map(document.getElementById("map"),option);

	map.addListener('click',function(e){
		getLatLng(e,map)
	});
}

function getLatLng(event,map){
	document.getElementById('table').innerHTML = "<table border='1'><tr><td>緯度</td><td width='200'>" + event.latLng.lat() + "</td><td>経度</td><td width='200'>" + event.latLng.lng() + "</td></tr></table>";

	var infoWindowOption = {
		position: event.latLng,
		content: "緯度:" + event.latLng.lat() + "<br>経度:" + event.latLng.lng()
	};

	var infoWindow = new google.maps.InfoWindow(infoWindowOption);
	infoWindow.open(map);
}

//-->
</script>
<style type="text/css">
<!--

#map{
	width: 500px;
	height: 360px;
}

//-->
</style>
<title>google_map</title>
</head>
<body onload="mapinit()">
<p>グーグルマップ</p>
<div id="table">
<table border="1"><tr><td>緯度</td><td width="200"></td><td>経度</td><td width="200"></td></tr></table>
</div>
<div id="map"></div>
</body>
</html>