m-iwamoto/gist:3891743

## gistfile1.html
<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<title>Google Map</title>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

		<style type="text/css">
			html {
				height: 100% ;
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px ;
			}

			#map_canvas {
				width: 1000px;
				height: 600px;
			}
		</style>

		<script type="text/javascript">
			//<![CDATA[

				var geocoder;
				var map;
				var marker;

				function initialize() {
					geocoder = new google.maps.Geocoder(); // Google Mapで利用する初期設定用の変数
					var myOptions = {
						zoom: 15,
	  					center: new google.maps.LatLng(35.669075, 139.703994),
	  					mapTypeId: google.maps.MapTypeId.ROADMAP
					}
					// GoogleMapの生成
					map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


				var infoWindow = new google.maps.InfoWindow;
				// Change this depending on the name of your PHP file
				downloadUrl("http://localhost/map/MLB.php",
				function(data) {
					var xml = data.responseXML;
					var markers = xml.documentElement.getElementsByTagName("marker");
					for (var i = 0; i < markers.length; i++) {
							var id = markers[i].getAttribute("id");
							var name = markers[i].getAttribute("name");
							//var catch = markers[i].getAttribute("catch");
							var url = markers[i].getAttribute("url");
							var address1 = markers[i].getAttribute("address1");
							var tel = markers[i].getAttribute("tel");
							var point = new google.maps.LatLng(
								parseFloat(markers[i].getAttribute("lat")),
								parseFloat(markers[i].getAttribute("lng")));
							var html = '<div style="height: 100px; font-size: 13px;"><a href="http://shugeiya.cooboo.jp/shops/detail/'+id+'" target="_brank">'+name+'</a><br>'+address1+'<br>'+tel+'';

							var marker = new google.maps.Marker({
								map: map,
								position: point,
								icon: 'http://shugeiya.cooboo.jp/images/hiyoko_pink.png',
								title: name
							});
						bindInfoWindow(marker, map, infoWindow, html);
					}
				});


				//イベント登録　地図の表示領域が変更されたらイベントを発生させる
				google.maps.event.addListener(map, 'bounds_changed', function(){
			    	renew_bounds();
				});

			}


			function bindInfoWindow(marker, map, infoWindow, html) {
				google.maps.event.addListener(marker, 'click', function() {
						infoWindow.setContent(html);
						infoWindow.open(map, marker);
				});
			}

			//XMLファイルの読み込み
			function downloadUrl(url, callback) {
				var request = window.ActiveXObject ?
					new ActiveXObject('Microsoft.XMLHTTP') :
					new XMLHttpRequest;

				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						request.onreadystatechange = doNothing;
						callback(request, request.status);
					}
				};

				request.open('GET', url, true);
				request.send(null);
			}


				function codeAddress() {

					if (marker) { marker.setMap(null); };

			//テキストボックスからデータを取得
					var address = document.getElementById("address").value; //ジオコーディングを依頼
					geocoder.geocode(
						{ 'address': address},
						function(results, status) {
							if (status == google.maps.GeocoderStatus.OK) {
								map.setCenter(results[0].geometry.location);
								marker = new google.maps.Marker({
									map: map,
									position: results[0].geometry.location
								});
							} else {
								alert("Geocode was not successful for the following reason: " + status);
							}

					});


				}

				function doNothing() {}


			//]]>
		</script>
	</head>
		<body onload="initialize();">
			<div id="map_canvas" ></div>

			<form>
				<p>
					<input type="text" id="address" size="30" value="住所を入力" />
					<input type="button" id="Geocode" value="座標取得" onclick="codeAddress();" />
				</p>
			</form>

		</body>
	</html>
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<title>Google Map</title>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

	<style type="text/css">
	html {
	height: 100% ;
	}

	body {
	height: 100%;
	margin: 0px;
	padding: 0px ;
	}

	#map_canvas {
	width: 1000px;
	height: 600px;
	}
	</style>

	<script type="text/javascript">
	//<![CDATA[

	var geocoder;
	var map;
	var marker;

	function initialize() {
	geocoder = new google.maps.Geocoder(); // Google Mapで利用する初期設定用の変数
	var myOptions = {
	zoom: 15,
	center: new google.maps.LatLng(35.669075, 139.703994),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	// GoogleMapの生成
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


	var infoWindow = new google.maps.InfoWindow;
	// Change this depending on the name of your PHP file
	downloadUrl("http://localhost/map/MLB.php",
	function(data) {
	var xml = data.responseXML;
	var markers = xml.documentElement.getElementsByTagName("marker");
	for (var i = 0; i < markers.length; i++) {
	var id = markers[i].getAttribute("id");
	var name = markers[i].getAttribute("name");
	//var catch = markers[i].getAttribute("catch");
	var url = markers[i].getAttribute("url");
	var address1 = markers[i].getAttribute("address1");
	var tel = markers[i].getAttribute("tel");
	var point = new google.maps.LatLng(
	parseFloat(markers[i].getAttribute("lat")),
	parseFloat(markers[i].getAttribute("lng")));
	var html = '<div style="height: 100px; font-size: 13px;"><a href="http://shugeiya.cooboo.jp/shops/detail/'+id+'" target="_brank">'+name+'</a><br>'+address1+'<br>'+tel+'';

	var marker = new google.maps.Marker({
	map: map,
	position: point,
	icon: 'http://shugeiya.cooboo.jp/images/hiyoko_pink.png',
	title: name
	});
	bindInfoWindow(marker, map, infoWindow, html);
	}
	});


	//イベント登録　地図の表示領域が変更されたらイベントを発生させる
	google.maps.event.addListener(map, 'bounds_changed', function(){
	renew_bounds();
	});

	}



	function bindInfoWindow(marker, map, infoWindow, html) {
	google.maps.event.addListener(marker, 'click', function() {
	infoWindow.setContent(html);
	infoWindow.open(map, marker);
	});
	}

	//XMLファイルの読み込み
	function downloadUrl(url, callback) {
	var request = window.ActiveXObject ?
	new ActiveXObject('Microsoft.XMLHTTP') :
	new XMLHttpRequest;

	request.onreadystatechange = function() {
	if (request.readyState == 4) {
	request.onreadystatechange = doNothing;
	callback(request, request.status);
	}
	};

	request.open('GET', url, true);
	request.send(null);
	}



	function codeAddress() {

	if (marker) { marker.setMap(null); };

	//テキストボックスからデータを取得
	var address = document.getElementById("address").value; //ジオコーディングを依頼
	geocoder.geocode(
	{ 'address': address},
	function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	map.setCenter(results[0].geometry.location);
	marker = new google.maps.Marker({
	map: map,
	position: results[0].geometry.location
	});
	} else {
	alert("Geocode was not successful for the following reason: " + status);
	}

	});


	}

	function doNothing() {}




	//]]>
	</script>
	</head>
	<body onload="initialize();">
	<div id="map_canvas" ></div>

	<form>
	<p>
	<input type="text" id="address" size="30" value="住所を入力" />
	<input type="button" id="Geocode" value="座標取得" onclick="codeAddress();" />
	</p>
	</form>

	</body>
	</html>
No results found