2.1.6 経度緯度とズームレベルを指定する のコード(Google Maps API プログラミング入門)
1. マーカーをドラッグ＆ドロップしてください。
2.地図の動き方を選択してください
地図の動き方：
GMap2.setCenter()
GMap2.panTo()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2.1.6 経度緯度とズームレベルを指定する のコード(Google Maps API プログラミング入門)</title>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=[MAPS_API_KEY]"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map_canvas;
function initialize () {
if (GBrowserIsCompatible()) {
var init_pos = new GLatLng(35.677335, 139.744613);
var init_zoom = 16;
map_canvas = new GMap2(document.getElementById("map_canvas"));
map_canvas.setCenter(init_pos, init_zoom);
marker = new GMarker(init_pos, {draggable : true});
map_canvas.addOverlay(marker);
GEvent.addListener(marker, "dragend", onMarkerDragged);
}
}
function onMarkerDragged(latlng) {
var moveByElements = document.getElementsByName("moveBy");
if (moveByElements[0].checked) {
map_canvas.setCenter(latlng);
} else {
map_canvas.panTo(latlng);
}
}
GEvent.addDomListener(window, "load", initialize);
GEvent.addDomListener(window, "unload", GUnload);
//]]>
</script>
</head>
<body >
<h1>2.1.6 経度緯度とズームレベルを指定する のコード(Google Maps API プログラミング入門)</h1>
<p>1. マーカーをドラッグ＆ドロップしてください。<br>
2.地図の動き方を選択してください<br>
<b>地図の動き方：</b>
<input type="radio" name="moveBy" value="setCenter" checked>GMap2.setCenter()
<input type="radio" name="moveBy" value="panTo">GMap2.panTo()<br>
<div id="map_canvas" style="width: 100%; height: 90%"></div>
</body>
</html>
