geojackass/index.html

## index.html
<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="Shoichi Otomo">
	<head>
	<title>qgis_book</title>
	<style type="text/css">
		#canvas {
				width: 80%;
				height: 80%;
				margin: 0;
		}
		#canvas .olControlAttribution {
				font-size: 13px;
				bottom: 5px;
		}
		</style>
		<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
		<script type="text/javascript">

			function init() {
			var map;
			//optionsの指定はマウスイベントの取得時に必要になる
			var options = {
				controls:[
						new OpenLayers.Control.Navigation(),
						new OpenLayers.Control.Attribution()
						]
						};

			map = new OpenLayers.Map("canvas", options);
			//map = new OpenLayers.Map("canvas", {allOverlays: true});
			map.addControl(new OpenLayers.Control.LayerSwitcher());

			var mapink = new OpenLayers.Layer.OSM();
			map.addLayer(mapink);

			var gsat = new OpenLayers.Layer.Google(
			"Google Satellite",
			{type: google.maps.MapTypeId.SATELLITE, numZoomLevel: 10}
			)
			map.addLayer(gsat);

			var ghyb = new OpenLayers.Layer.Google(
			"Google Hybrid",
			{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 10, visibility: false}
			)
			map.addLayer(ghyb);

			//地図の中心に技術評論社を設定
			var lonLat = new OpenLayers.LonLat(139.735646, 35.693697)
			.transform(
			new OpenLayers.Projection("EPSG:4326"),
			new OpenLayers.Projection("EPSG:900913")
			);
			map.setCenter(lonLat, 10);

			//技術評論社にmarkerを描画する
			var markers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(markers);
			var marker = new OpenLayers.Marker(
			new OpenLayers.LonLat(139.735646, 35.693697)
			.transform(
			new OpenLayers.Projection("EPSG:4326"),
			new OpenLayers.Projection("EPSG:900913")
			)
			);
			markers.addMarker(marker);

				map.events.register("mousemove", map, onMouseMove);
				map.events.register("zoomend", map, onZoomChanged);
			}
			function onMouseMove() {
			var lonLat = this.getCenter().transform(
			new OpenLayers.Projection("EPSG:900913"),
			new OpenLayers.Projection("EPSG:4326")
			);
			document.getElementById("lat").firstChild.nodeValue = lonLat.lat;
			document.getElementById("lon").firstChild.nodeValue = lonLat.lon;
			}
			function onZoomChanged() {
			document.getElementById("zoom").firstChild.nodeValue = this.getZoom();
			}

			</script>
	</head>
	<body onload="init();">
		<div id="canvas">mapArea</div><br />
			<div style="border:none; width:500px; padding:5px;">
			Latitude：<div id="lat" style="display:inline">waiting</div><br />
			Longitude：<div id="lon" style="display:inline">waiting</div><br />
			ZoomLevel：<div id="zoom" style="display:inline">waiting</div>
			</div>
	</body>
</html>
	<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="Shoichi Otomo">
	<head>
	<title>qgis_book</title>
	<style type="text/css">
	#canvas {
	width: 80%;
	height: 80%;
	margin: 0;
	}
	#canvas .olControlAttribution {
	font-size: 13px;
	bottom: 5px;
	}
	</style>
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
	<script type="text/javascript">

	function init() {
	var map;
	//optionsの指定はマウスイベントの取得時に必要になる
	var options = {
	controls:[
	new OpenLayers.Control.Navigation(),
	new OpenLayers.Control.Attribution()
	]
	};

	map = new OpenLayers.Map("canvas", options);
	//map = new OpenLayers.Map("canvas", {allOverlays: true});
	map.addControl(new OpenLayers.Control.LayerSwitcher());

	var mapink = new OpenLayers.Layer.OSM();
	map.addLayer(mapink);

	var gsat = new OpenLayers.Layer.Google(
	"Google Satellite",
	{type: google.maps.MapTypeId.SATELLITE, numZoomLevel: 10}
	)
	map.addLayer(gsat);

	var ghyb = new OpenLayers.Layer.Google(
	"Google Hybrid",
	{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 10, visibility: false}
	)
	map.addLayer(ghyb);

	//地図の中心に技術評論社を設定
	var lonLat = new OpenLayers.LonLat(139.735646, 35.693697)
	.transform(
	new OpenLayers.Projection("EPSG:4326"),
	new OpenLayers.Projection("EPSG:900913")
	);
	map.setCenter(lonLat, 10);

	//技術評論社にmarkerを描画する
	var markers = new OpenLayers.Layer.Markers("Markers");
	map.addLayer(markers);
	var marker = new OpenLayers.Marker(
	new OpenLayers.LonLat(139.735646, 35.693697)
	.transform(
	new OpenLayers.Projection("EPSG:4326"),
	new OpenLayers.Projection("EPSG:900913")
	)
	);
	markers.addMarker(marker);

	map.events.register("mousemove", map, onMouseMove);
	map.events.register("zoomend", map, onZoomChanged);
	}
	function onMouseMove() {
	var lonLat = this.getCenter().transform(
	new OpenLayers.Projection("EPSG:900913"),
	new OpenLayers.Projection("EPSG:4326")
	);
	document.getElementById("lat").firstChild.nodeValue = lonLat.lat;
	document.getElementById("lon").firstChild.nodeValue = lonLat.lon;
	}
	function onZoomChanged() {
	document.getElementById("zoom").firstChild.nodeValue = this.getZoom();
	}

	</script>
	</head>
	<body onload="init();">
	<div id="canvas">mapArea</div><br />
	<div style="border:none; width:500px; padding:5px;">
	Latitude：<div id="lat" style="display:inline">waiting</div><br />
	Longitude：<div id="lon" style="display:inline">waiting</div><br />
	ZoomLevel：<div id="zoom" style="display:inline">waiting</div>
	</div>
	</body>
	</html>