ANTON072
4/8/2015 - 10:16 AM

googlemapで簡易的なルート検索 http://bl.ocks.org/ANTON072/f39adaea933d1b282eee

googlemapで簡易的なルート検索 http://bl.ocks.org/ANTON072/f39adaea933d1b282eee

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  #map_canvas {
    width: 100%;
    height: 100%;
  }
  </style>
  <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDg13xe7Kt-Kwb0K-3ThoyyXkO38hvWt9I&?sensor=TRUE"></script>
</head>
<body>

  <div id="map_canvas"></div>

  <script>
  var mapCanvas;
  function initialize(){
    var mapDiv = document.getElementById('map_canvas');
    var initPos = new google.maps.LatLng(35.658613, 139.745525);
    var mapOptions = {
      center: initPos,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    mapCanvas = new google.maps.Map(mapDiv, mapOptions);

    // ルート検索の条件を指定
    var request = {
      origin: '東京駅', // 出発点
      destination: '東京タワー', // 目的地
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    // Directionsサービスを使ってGoogleのサーバーにルート検索を依頼
    var directionsService = new google.maps.DirectionsService();

    // 結果はcallback_direction関数でうけとる
    directionsService.route(request, callback_direction);

    function callback_direction(result, status){
      console.log(result, status);
      if (status === google.maps.DirectionsStatus.OK) {
        // 結果を地図に表示
        var directionsDisplay = new google.maps.DirectionsRenderer({
          map: mapCanvas
        });
        directionsDisplay.setDirections(result);
      }
    }

  }


  google.maps.event.addDomListener(window, 'load', initialize);
  </script>

</body>
</html>