Google Maps JavaScript API v3で緯度経度・住所を取得・検索

README

緯度経度・住所の取得と検索をするJSです。

http://web.loft-net.co.jp/lofttecs/get_latlng/

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #dff;
  font: 1.0em sans-serif;
}

jsdoit.html

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCbN7BNSQ6EXNS-JB4BfSh65UI5dRNyl4U&sensor=false"></script>
<div id="map_canvas" style="width:100%; height:350px"></div>

jsdoit.js

var mapOptions = {
	center: new google.maps.LatLng(35.67453, 139.76707),
	zoom: 18,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_c = document.getElementById("map_canvas");
var map = new google.maps.Map(map_c,mapOptions);
var frm = document.createElement("div");
var s='';
s += '<input id="address" type="textbox" value="" size="50" />';
s += '<input type="button" value="set" id="btn_address" /><br />';
s += 'lat:<input type="text" name="latitude" id="latitude" size="40" /><br />';
s += 'lng:<input type="text" name="longitude" id="longitude" size="40" />';
s += '<input type="button" value="set" id="btn_LatLng" />';
frm.innerHTML=s;
map_c.parentNode.appendChild(frm);
var geocoder = new google.maps.Geocoder();

//緯度経度を出力
var outLatLng = function (lat,lng){
	document.getElementById('latitude').value =lat;
	document.getElementById('longitude').value = lng;
}
var marker = new google.maps.Marker({
		position: map.getCenter(), 
		map: map,
		draggable:true
	});

marker.setVisible(false);

google.maps.event.addListener(map, 'click', function(event) {
	placeMarker(event.latLng);
});
google.maps.event.addListener(marker, 'click', function(event) {
	marker.setVisible(false);
	outLatLng('','');
});
google.maps.event.addListener(marker, 'dragend', function(event) {
	placeMarker(event.latLng);
});

//マーカーのセット
var placeMarker = function (location) {
	console.log(location);
	var clickedLocation = new google.maps.LatLng(location);
	marker.setPosition(location );
	marker.setVisible(true);
	marker.setAnimation(google.maps.Animation.Zj);
	
	outLatLng(location.lat(),location.lng());
	

	geocoder.geocode({ latLng: location }, function(responses) {
		if (responses && responses.length > 0) {
			document.getElementById('address').value = responses[0].formatted_address;
		} else {
			document.getElementById('address').value = '';
		}
	});
	
}
placeMarker(map.getCenter());
//緯度経度
document.getElementById("btn_LatLng").onclick = function () {
	var LatLngAddressLocation =  new google.maps.LatLng(document.getElementById('latitude').value, document.getElementById('longitude').value);
	placeMarker(LatLngAddressLocation);
	map.setCenter(LatLngAddressLocation);
}

document.getElementById("btn_address").onclick=function(){
	var address = document.getElementById("address").value;
	if (geocoder) {
		geocoder.geocode( { 'address': address}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				placeMarker(results[0].geometry.location)
				map.setCenter(results[0].geometry.location);
			} else {
				alert("Geocode was not successful for the following reason: " + status);
			}
		});
	}
}