Google Maps API v3

Google Maps APIs  |  Google Developers がグーグルマップＡＰＩのオフィシャルサイト

以下のサンプルは、観光案内で使ったものをまとめたものである

  1. 地図上でクリックされた座標を表示する

  2. 地図上でクリックされた座標と住所を表示する

  3. イベントの ON/OFF

  4. 情報ウィンドウ付きマーカーの複数表示

  5. GPS の ON/OFF

  6. ドラッグ可能クリック ルート探索


    1. 地図上でクリックされた座標を表示する



      <!DOCTYPE html>
<html>
  <title>地図上でクリックされた座標を表示する</title>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { width: 320px; height: 320px }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        // 中心座標（35.0,140.0）、拡大率 8 で地図を map_canvas に表示する
        var mapOptions = {
          center: new google.maps.LatLng(35.0,140.0),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        // 地図上のクリック イベントを作成する
        google.maps.event.addListener(map, 'click', function(e){
          // クリックされた座標にマーカーを表示する
          var marker = new google.maps.Marker({
            map: map,
            position: e.latLng
          });
          // クリック位置の緯度と経度を latlng に表示する
          document.getElementById('latlng').innerHTML = '' + e.latLng;
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    地図上でクリックされた座標を表示する
    <div id="map_canvas"></div>
    クリック位置の緯度と経度<br>
    <span id="latlng"></span>
  </body>
</html>

    2. 地図上でクリックされた座標と住所を表示する



      <!DOCTYPE html>
<html>
  <title>地図上でクリックされた座標と住所を表示する</title>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { width: 320px; height: 320px }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        // 中心座標（35.0,140.0）、拡大率 8 で地図を map_canvas に表示する
        var mapOptions = {
          center: new google.maps.LatLng(35.0,140.0),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        // ジオコーダー オブジェクトの作成
        var geocoder = new google.maps.Geocoder();
        // 地図上のクリック イベントを作成する
        google.maps.event.addListener(map, 'click', function(e){
          // 座標から住所を求める
          var request = {latLng: e.latLng};
          geocoder.geocode(request, function(results, status){
            // クリック位置の住所を address に表示する
            document.getElementById('address').innerHTML = '' + results[0].formatted_address;
            // 住所位置にマーカーを表示する（クリック位置と住所位置は、必ずしも一致しない）
            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
            });
            // 住所位置の緯度と経度を latlng に表示する
            document.getElementById('latlng').innerHTML = '' + results[0].geometry.location;
          });
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    地図上でクリックされた座標と住所を表示する
    <div id="map_canvas"></div>
    クリック位置の住所<br>
    <span id="address"></span><br>
    住所位置の緯度と経度<br>
    <span id="latlng"></span><br>
  </body>
</html>

    3. イベントの ON/OFF



      ［イベント開始］ボタンを押した後、マーカーをクリックする。
      ［イベント終了］ボタンを押した後、再び、マーカーをクリックする。

      グーグルマップのイベントは、
      google.maps.event.addListener(イベントの対象, イベントの動作, イベント発生時に実行されるコールバック関数);
      となっている。
      イベントの対象が、マーカーの時はコールバック関数は引数を持たないが、地図の時は１つ持つ。
      通常、関数は、一度実行されると終わるが、コールバック関数は、明示的に終わらせるまで、イベントが発生するごとに呼び出される。
      addListener() のコールバック関数を終わらせるには、removeListener() を使う。
      <!DOCTYPE html>
<html>
  <title>イベントの ON/OFF</title>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { width: 320px; height: 320px }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
      var map;
      var marker;          // マーカー オブジェクト
      var id_click = null; // マーカー クリック イベント ID
      var infowindow;      // 情報ウィンドウ オブジェクト
      
      function initialize() {
        // 中心座標（35.0,140.0）、拡大率 8 で地図を map_canvas に表示する
        var latlng = new google.maps.LatLng(35.0,140.0);
        var mapOptions = {
          center: latlng,
          zoom: 8
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
	// マーカーを作成する
        marker = new google.maps.Marker({
                        map     : map,
                        position: latlng
        });
        // 情報ウィンドウの作成
        infowindow = new google.maps.InfoWindow({
                        content: 'ここが中心'
        });
      }
      
      // イベント開始
      function StartEvent()
      {
        // マーカーがクリックされたら、情報ウィンドウが表示されるイベントの作成
        if(!id_click){
          id_click = google.maps.event.addListener(marker, 'click', function(){
            infowindow.open(map, marker);
          });
        }
      }
      
      // イベント終了
      function EndEvent()
      {
        if(id_click){
          google.maps.event.removeListener(id_click);
          id_click = null;
        }
      }
    </script>
  </head>
  <body onload="initialize()">
    イベントの ON/OFF<br>
    <input type="button" value="イベント開始" onclick="StartEvent();">
    <input type="button" value="イベント終了" onclick="EndEvent();">
    <div id="map_canvas"></div>
  </body>
</html>

    4. 情報ウィンドウ付きマーカーの複数表示



      <!DOCTYPE html>
<html>
  <title>情報ウィンドウ付きマーカーの複数表示</title>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { width: 320px; height: 320px }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
      var map;
      var markers = [];
      
      function initialize() {
        // 中心座標（35.0,140.0）、拡大率 8 で地図を map_canvas に表示する
        var mapOptions = {
          center: new google.maps.LatLng(35.0,140.0),
          zoom: 8
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        // ジオコーダー オブジェクトの作成
        var geocoder = new google.maps.Geocoder();
        // データファイル読み込み
        var xhr = new XMLHttpRequest(); // IE7 以降
        xhr.open('GET', './data.txt', false);
        xhr.send();
        // データは、CSV形式のため、先ず、行ごとに分割し、lines に入れる
        var lines = xhr.responseText.split('\n');
        // 次に各行をカンマごとに分割し、vals に入れる
        // （vals[0] に地名、vals[1] に住所が入る）
        for(var i=0; i<lines.length; i++){
          var vals = lines[i].split(',');
          // 住所から座標を求める
          var request = {address: vals[1]};
          geocoder.geocode(request, function(results, status){
            // マーカーを追加
            AddMarker(results[0].geometry.location, vals[0], vals[1]);
          });
        }
      }
      
      // マーカーの追加
      function AddMarker(latlng, strTitle, strAddr)
      {
        // マーカーを作成する
        var marker = new google.maps.Marker({
                        map     : map,
                        position: latlng,
                        title   : strTitle
        });
        // マーカーを配列に入れる
        markers.push(marker);
        // 情報ウィンドウの作成
        var string = strTitle + '<br>' + strAddr;
        var infowindow = new google.maps.InfoWindow({
                         content: string
        });
        // マーカーがクリックされたら、情報ウィンドウが表示されるイベントの作成
        google.maps.event.addListener(marker, 'click', function(){
          infowindow.open(map, marker);
        });
      }
      
    </script>
  </head>
  <body onload="initialize()">
    情報ウィンドウ付きマーカーの複数表示
    <div id="map_canvas"></div>
  </body>
</html>

--------------------------------------------------------------------------------
[data.txt]

創造の杜,千葉県千葉市緑区あすみが丘５−４１
マザー牧場オートキャンプ場,千葉県富津市田倉９４０−３
源氏山公園,神奈川県鎌倉市扇ガ谷４−６４９−１

    5. GPS の ON/OFF



      GPS を使うときは、IE よりも Chrome や FireFox を使った方が良い
      ［GPS開始］ボタンで、GPS 開始
      ［GPS終了］ボタンで、GPS 終了
      <!DOCTYPE html>
<html>
  <title>GPS の ON/OFF</title>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { width: 320px; height: 320px }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      var id_gps = null;     // GPS の ID
      var marker_gps = null; // マーカー オブジェクト
      
      function initialize() {
        // 中心座標（35.0,140.0）、拡大率 8 で地図を map_canvas に表示する
        var mapOptions = {
          center: new google.maps.LatLng(35.0,140.0),
          zoom: 8
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      }
      
      // GPS 開始
      function RunGPS()
      {
        if(navigator.geolocation && !id_gps){
          id_gps = navigator.geolocation.watchPosition(function(e){
            // 緯度と経度を LatLng 形式に変換
            var pos_gps = new google.maps.LatLng(e.coords.latitude, e.coords.longitude);
            // マーカー消去
            DeleteMaker();
            // マーカー作成
            marker_gps = new google.maps.Marker({
                                        map     : map,
                                        position: pos_gps,
                                        title   : '現在地'
            });
            // 地図の中心を GPS 座標にする
            map.setCenter(pos_gps);
          });
        }
      }
      
      // GPS 終了
      function StopGPS()
      {
        // GPS 終了
	if(id_gps){
          navigator.geolocation.clearWatch(id_gps);
          id_gps = null;
        }
        // マーカー消去
        DeleteMaker();
      }
      
      // マーカー消去
      function DeleteMaker()
      {
        if(marker_gps){
          marker_gps.setMap(null);
        }
      }
    </script>
  </head>
  <body onload="initialize()">
    GPS の ON/OFF<br>
    <input type="button" value="GPS開始" onclick="RunGPS();">
    <input type="button" value="GPS終了" onclick="StopGPS();">
    <div id="map_canvas"></div>
  </body>
</html>

    6. ドラッグ可能クリック ルート探索



      地図上でクリックした座標を通過するルート探索
      マーカーはドラッグ可能
      <!DOCTYPE html>
<html>
  <title>ドラッグ可能クリックルート探索</title>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      table { height: 100% }
      #map_canvas { width: 320px; height: 320px }
      #map_sentence { width: 320px; height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
      var waypoint_max = 8; // business は 23
      var routes = [];      // waypts に始点と終点を含めたもの
      var waypts = [];      // 経由地点
      var dirServ = null;
      var dirDisp = null;
      
      function initialize() {
        // 中心座標（35.0,140.0）、拡大率 8 で地図を map_canvas に表示する
        var latlng = new google.maps.LatLng(35.0,140.0);
        var mapOptions = {
          center: latlng,
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        // DirectionsService, DirectionsRenderer オブジェクト作成
        dirServ = new google.maps.DirectionsService();
        dirDisp = new google.maps.DirectionsRenderer({
                        draggable       : true, // マーカー ドラッグ可能
                        preserveViewport: true  // 中心座標固定
        });
        // 地図クリック イベント
        google.maps.event.addListener(map, 'click', function(e){
          // クリックされた座標を配列に入れる
          AddPoint(e.latLng)
        });
        // ルート探索（地図）を表示
        dirDisp.setMap(map);
        // ルート探索（文字）を表示
        dirDisp.setPanel(document.getElementById('map_sentence'));
        // マーカーが追加されたり、ドラッグされた時のイベント
        google.maps.event.addListener(dirDisp, 'directions_changed', function()
        {
          // マーカー情報取得
          var res = dirDisp.getDirections();
          var data = res.routes[0];
          // buf にルート探索後の全経路を入れる
          var buf = [];
          buf.push(data.legs[0].start_location);
          var i;
          for(i=0; i<data.legs.length; i++){
            buf.push(data.legs[i].end_location);
          }
          // optimizeWaypoints が true だったり、
          // マーカーがドラッグされたりした場合の対策として
          // routes に最適化される前の順番でドラッグ後のデータを入れる
          for(i=0; i<data.waypoint_order.length; i++){
            var index = data.waypoint_order[i];
            routes[index] = buf[i];
          }
        });
      }
      
      // routes に座標を追加
      function AddPoint(latlng)
      {
        if(waypoint_max + 1 < routes.length){
          routes[routes.length-1] = null;
        }
        routes.push(latlng);
        // waypts に座標を追加
        CalcPoint();
      }
      
      // waypts に座標を追加
      function CalcPoint()
      {
        waypts = [];
        var i;
        for(i=0; i<routes.length-2; i++){
          if(waypoint_max > waypts.length){
            waypts[i] = {location: routes[i+1]};
          }
        }
        // ルート探索
        if(routes.length > 0){
          CalcRoute();
        }
      }
      
      // ルート探索
      function CalcRoute()
      {
        var req = {
                        origin          : routes[0],
                        destination     : routes[routes.length-1],
                        waypoints       : waypts,
                        travelMode      : google.maps.DirectionsTravelMode.DRIVING
        }
        dirServ.route(req, function(response, status){
          dirDisp.setDirections(response);
        });
      }
      
      // ルート リセット
      function ResetRoute()
      {
        routes = [];
        waypts = [];
        dirDisp.setDirections({routes: []});
      }
    </script>
  </head>
  <body onload="initialize()">
    ドラッグ可能クリック ルート探索<br>
    <input type="button" value="リセット" onclick="ResetRoute();">
    <table>
      <tr>
        <td id="map_canvas"></td>
      </tr>
      <tr>
        <td id="map_sentence"></td>
      </tr>
    </table>
  </body>
</html>