Google Maps API v3

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

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

  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(イベントの対象, イベントの動作, イベント発生時に実行されるコールバック関数);
      となっている。
      イベントの対象が、マーカーの時はコールバック関数は引数を持たないが、地図の時は1つ持つ。
      通常、関数は、一度実行されると終わるが、コールバック関数は、明示的に終わらせるまで、イベントが発生するごとに呼び出される。
      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−41
      マザー牧場オートキャンプ場,千葉県富津市田倉940−3
      源氏山公園,神奈川県鎌倉市扇ガ谷4−649−1
            

    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>