GoogleMapsJavaScriptApiの経路案内について

###前提・実現したいこと
(https://developers.google.com/maps/documentation/javascript/examples/directions-panel?hl=ja)ここの載っているこちらのコードの<option value>タグ(このコードではChicago等)を変更して
自分で入力した緯度経度で出発地点と到着地点を選択肢に出るようにしたいです。

こちらのコードで、出発地点と到着地点を自分が好きなところにしたいのですが、
このコードからChicago等の緯度経度を取得してるのかがわからなくて現状自分が好きなところに変更できなくて困っています…
###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Displaying text directions with <code>setPanel()</code></title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; }

#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}

#right-panel select, #right-panel input {
font-size: 15px;
}

#right-panel select {
width: 100%;
}

#right-panel i {
font-size: 12px;
}

  #right-panel {
    height: 100%;
    float: right;
    width: 390px;
    overflow: auto;
  }

  #map {
    margin-right: 400px;
  }

  #floating-panel {
    background: #fff;
    padding: 5px;
    font-size: 14px;
    font-family: Arial;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
    display: none;
  }

  @media print {
    #map {
      height: 500px;
      margin: 0;
    }

    #right-panel {
      float: none;
      width: auto;
    }
  }
</style>

</head> <body> <div id="floating-panel"> <strong>Start:</strong> <select id="start"> <option value="chicago, il">Chicago</option> <option value="st louis, mo">St Louis</option> <option value="joplin, mo">Joplin, MO</option> <option value="oklahoma city, ok">Oklahoma City</option> <option value="amarillo, tx">Amarillo</option> <option value="gallup, nm">Gallup, NM</option> <option value="flagstaff, az">Flagstaff, AZ</option> <option value="winona, az">Winona</option> <option value="kingman, az">Kingman</option> <option value="barstow, ca">Barstow</option> <option value="san bernardino, ca">San Bernardino</option> <option value="los angeles, ca">Los Angeles</option> </select> <br> <strong>End:</strong> <select id="end"> <option value="chicago, il">Chicago</option> <option value="st louis, mo">St Louis</option> <option value="joplin, mo">Joplin, MO</option> <option value="oklahoma city, ok">Oklahoma City</option> <option value="amarillo, tx">Amarillo</option> <option value="gallup, nm">Gallup, NM</option> <option value="flagstaff, az">Flagstaff, AZ</option> <option value="winona, az">Winona</option> <option value="kingman, az">Kingman</option> <option value="barstow, ca">Barstow</option> <option value="san bernardino, ca">San Bernardino</option> <option value="los angeles, ca">Los Angeles</option> </select> </div> <div id="right-panel"></div> <div id="map"></div> <script> function initMap() { var directionsDisplay = new google.maps.DirectionsRenderer; var directionsService = new google.maps.DirectionsService; var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: {lat: 41.85, lng: -87.65} }); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('right-panel'));

var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=XXXX&callback=initMap"
    async defer></script>

</body> </html>

###試したこと
試しにChicagoのところのコードをTokyoと変更してもMap上ではChicagoのままでした

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2016/12/14 18:18

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

このコードからChicago等の緯度経度を取得してるのかがわからなくて

javascript
1function calculateAndDisplayRoute(directionsService, directionsDisplay) {
2  var start = document.getElementById('start').value;
3  var end = document.getElementById('end').value;
4  directionsService.route({
5    origin: start,
6    destination: end,
7    travelMode: google.maps.TravelMode.DRIVING
8  }, function(response, status) {
9    if (status === google.maps.DirectionsStatus.OK) {
10      directionsDisplay.setDirections(response);
11    } else {
12      window.alert('Directions request failed due to ' + status);
13    }
14  });
15}