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&amp;v=2&amp;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>





Search
Books
Google Maps API Programming Guide

Four Google Maps API Experts wrote this book. Introducing useful examples for developers!
See more details