niiyz/map.js

## map.js
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="UTF-8">
<style>
html, body, #myMap {
  width: 100%;
  height: 100%;
  margin: 0px;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var latLng = new google.maps.LatLng(36.861751, 136.991468);
  var mapOptions = {
    zoom: 10,
    center: latLng
  };
  var div = document.getElementById("myMap");
  var map = new google.maps.Map(div, mapOptions);
  var textBox = document.createElement('input');
  textBox.style.width = '250px';
  textBox.style.marginTop = '30px';
  textBox.value = '935-0032';
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(textBox);
  var btn = document.createElement('input');
  btn.type = 'button';
  btn.value = '決定';
  btn.style.marginTop = '30px';
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(btn);
  google.maps.event.addDomListener(btn, 'click', function() {
    if (textBox.value) {
      changeCenter(map, textBox.value);
    }
  });
}
function changeCenter(map, address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var location = results[0].geometry.location;
            var lat = location.lat();
            var lng = location.lng();
            var latlng = {lat: lat, lng: lng};
            map.setCenter(latlng);
        } else {
            console.log("Geocode was not successful for the following reason: " + status);
        }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="ja">
	<meta charset="UTF-8">
	<style>
	html, body, #myMap {
	width: 100%;
	height: 100%;
	margin: 0px;
	}
	</style>
	</head>
	<body>
	<div id="myMap"></div>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
	<script>
	function initialize() {
	var latLng = new google.maps.LatLng(36.861751, 136.991468);
	var mapOptions = {
	zoom: 10,
	center: latLng
	};
	var div = document.getElementById("myMap");
	var map = new google.maps.Map(div, mapOptions);
	var textBox = document.createElement('input');
	textBox.style.width = '250px';
	textBox.style.marginTop = '30px';
	textBox.value = '935-0032';
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(textBox);
	var btn = document.createElement('input');
	btn.type = 'button';
	btn.value = '決定';
	btn.style.marginTop = '30px';
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(btn);
	google.maps.event.addDomListener(btn, 'click', function() {
	if (textBox.value) {
	changeCenter(map, textBox.value);
	}
	});
	}
	function changeCenter(map, address) {
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({'address': address}, function (results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	var location = results[0].geometry.location;
	var lat = location.lat();
	var lng = location.lng();
	var latlng = {lat: lat, lng: lng};
	map.setCenter(latlng);
	} else {
	console.log("Geocode was not successful for the following reason: " + status);
	}
	});
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</body>
	</html>