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

function getLatLng(event){
	document.getElementById('lat').innerHTML = "緯度:" + event.latLng.lat() + "<br>";
	document.getElementById('lng').innerHTML = "経度:" + event.latLng.lng() + "<br>";
	latLngToAddr(event.latLng);
}

function latLngToAddr(latlng){
	var geocoder = new google.maps.Geocoder();

	geocoder.geocode(
		{latLng: latlng},
		function(results, status){
			if(status == google.maps.GeocoderStatus.OK){
				address = results[0].formatted_address;
				document.getElementById('addr').innerHTML = "住所:" + address + "<br>";
			}
			else{
				alert("geocoder error");
			}
		}
	);
}

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

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

//-->
</style>
<title>google_map</title>
</head>
<body onload="mapinit()">
<p>グーグルマップ</p>
<span id="lat">緯度:<br></span>
<span id="lng">経度:<br></span>
<span id="addr">住所:<br></span>
<div id="map"></div>
</body>
</html>