Yama's Memorandum

Google Maps API を試してみた

September 22, 2017 – 11:35 am

このひと月くらい、JavaScript版の Goolge Maps Api を試してみた。いまさらという感じもなくはないが、改めて、このApiのすごさに感心したところだ。

Apiの機能を確認するため、「現在地」を中心とする周辺地図の描画と、「現在地」からマップ上でマウスクリックで指定した目的地への経路情報を取得・描画するサンプルを作成してみた。

ここでは、サンプルとして作成した地図の描画するとともに、htmlのソース、そしてJavaScriptのソースをアップしておいた。

サンプルとして作成した地図が以下に描画されているはずだ（なお、「現在地」の緯度・経度が取得できない場合、「現在地」に代え新宿駅を中心とする地図を描画する）。ブラウザによっては、現在地の緯度・経度の取得が、httpsにのみ対応するため、現在地の緯度、経度の取得ができない（Windowsの提供するブラウザはOK)。

　 Mode of Travel: 
DrivingWalkingBicyclingTransit

HTMLソース

<div style="display:flex;">
　 <b>Mode of Travel: </b>
   <select id="mode" style="float left; border: 1px solid #999;">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
   </select>
</div>
<div id="instruct" style="display: inline-block; border: 1px solid #999;"  ></div>
<div id="map" style="width:500px; height:500px;"></div>
<script type="text/javascript" src="/scripts/sample_google_map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[API key placed here]&callback=initMap"  async defer></script>

JavaScriptソース：

sample_google_map.js:

var map;
var marker;

var center_map;
var origin_center;
var dest_clicked;
var infowindow;
var selectedMode = "DRIVING";

var directionsDisplay;
var directionsService;

function initMap() {
  directionsDisplay = new google.maps.DirectionsRenderer({
      draggable: true,
      preserveViewport: true,
      suppressMarkers: true
  });
  directionsService = new google.maps.DirectionsService;

  document.getElementById("instruct").innerHTML = 'Route 情報（距離/ 所要時間）　　　';

  if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
  } else {
        document.getElementById("geo").innerHTML = "Geolocationが利用できません";
  }

  function successCallback(pos) {
    center_map = {
       lat: pos.coords.latitude,
       lng: pos.coords.longitude
    };
    set_map( center_map );
  }

  function errorCallback(error) {
    var shinjuku = {lat: 35.6894072, lng: 139.7003058};
    set_map( shinjuku ); 
  }

  function set_map( pos_center ) {
      
    origin_center = pos_center;
    map = new google.maps.Map(document.getElementById('map'), {
       center: pos_center,
       zoom: 15,
       draggable : true,
       scaleControl: true
    });
    directionsDisplay.setMap(map);

    marker =  new google.maps.Marker({
                 position: pos_center,
                 map: map,
                 icon: ''
    });

    infowindow = new google.maps.InfoWindow({
          content:  'sample_content',
          position: pos_center
    })

    google.maps.event.addListener( map,  'click', function (event) {
          dest_clicked = event.latLng;
          calculateAndDisplayRoute(directionsService, directionsDisplay);
          directionsDisplay.setMap(map);
    });

    map.addListener('rightclick', function() {
         map.setZoom(15);
         map.setCenter( pos_center );
         origin_center = pos_center;
         directionsDisplay.setDirections(null);
         directionsDisplay.setMap(null);
         document.getElementById("instruct").innerHTML = 'Route 情報（距離/ 所要時間）';
    });

    marker.addListener('mouseover', function() {
       infowindow.open( map, marker );
    }); 
    marker.addListener('mouseout', function() {
       infowindow.close();
    });

  }


  document.getElementById('mode').addEventListener('change', function() {
     selectedMode = document.getElementById('mode').value;
     calculateAndDisplayRoute(directionsService, directionsDisplay);
  });

  directionsDisplay.addListener('directions_changed', function() {
     computeTotalDistance(directionsDisplay.getDirections());
  });

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
      directionsService.route({
         origin: origin_center,
         destination: dest_clicked,
         travelMode: google.maps.TravelMode[selectedMode]
      }, function(response, status) {
         if(status == 'OK' ) {
             directionsDisplay.setDirections(response);
         } else {
             window.alert('Directions request failed due to ' + status);
                 }
      });
   }        
}

function computeTotalDistance(result) {
    var total = 0;
    var total_duration = 0;
    var myroute = result.routes[0];
    for (var i = 0; i < myroute.legs.length; i++) {
          total += myroute.legs[i].distance.value;
          total_duration += myroute.legs[i].duration.value;
    }
    total = total /1000;
    duration = toHms( total_duration );
    document.getElementById("instruct").innerHTML = '距離: ' + total + '(Km)　所要時間: ' + duration ;
}

function toHms(t) {
     var hms = "";
     var h = t / 3600 | 0;
     var m = t % 3600 / 60 | 0;
     var s = t % 60;

     if (h != 0) {
            hms = h + "時間" + padZero(m) + "分" + padZero(s) + "秒";
     } else if (m != 0) {
            hms = m + "分" + padZero(s) + "秒";
     } else {
            hms = s + "秒";
     }

     return hms;

     function padZero(v) {
          if (v < 10) {
                     return "0" + v;
          } else {
                     return v;
          }
     }
} 

　　

---