Notice: Trying to access array offset on value of type bool in /home/himariweb/www/wp/wp-content/themes/luxeritas/inc/json-ld.php on line 114

GoogleMapでルート検索をする

2018年10月17日

スタートとゴールを指定してGoogleMapにルートを表示させる。

必要なもの

・google.maps.DirectionsService
ルート検索を計算してくれるもの
・google.maps.DirectionsRenderer
検索した結果をレンダリングしてくれるもの

サンプルコード

HTML

<div>始点<input id="start"></div>

<div>終点<input id="end"></div>

<input id="submit" type="button" type="button" value="決定">

<div id="map"></div>

JS

function initMap() {
  var tokyo = {lat: 35.681167, lng: 139.767052}

// マップのインスタンス作成
  var map = new google.maps.Map(document.getElementById('map'),{
    center: tokyo,  // 地図の中心を指定
    zoom: 19 // 地図のズームを指定
  });

// マーカーのインスタンス作成
  var marker = new google.maps.Marker({
    position: tokyo,
    map: map,
    title: "東京",
  });

// ルート検索オブジェクト
  var directionsService = new google.maps.DirectionsService;
  // ルート描画オブジェクト
  var directionsDisplay = new google.maps.DirectionsRenderer;
  directionsDisplay.setMap(map);

document.getElementById('submit').addEventListener("click",function(){
    displayRoute(directionsService,directionsDisplay)
  })
}

// ルート表示
function displayRoute(service,display) {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  service.route({
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}