1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  6. <title>Directions Serviceを利用する</title>
  7. <link rel="stylesheet" href="css/sample-7.css">
  8. <script src="http://maps.googleapis.com/maps/api/js"></script>
  9. <script src="js/sample-7.js"></script>
  10. </head>
  11. <body>
  12. <div id="map_canvas"></div>
  13. <div id="directionsPanel"></div>
  14. </body>
  15. </html>
  1. /*
  2. * sample-7.css
  3. * Directions Serviceを利用する
  4. */
  5. body { margin: 0; line-height: 1.6; font-family: arial,sans-serif; }
  6. html, body, #map_canvas, #directionsPanel { height: 100%; }
  7. #map_canvas { float: right; width: 70%; }
  8. #directionsPanel { float: left; width: 30%; overflow: auto; font-size: 80%; line-height: 1.6; }
  9. @media print {
  10. html, body { height: auto; }
  11. #map_canvas { height: 650px; }
  12. }
  13. .adp-placemark { margin-top: 0; }
  14. .adp-step { background: #eee; }
  15. .adp-summary, .adp-step, .adp-substep { padding: 0.3em 0.5em; }
  16. .adp-legal { padding: 0 0.5em; font-size: 80%; }
  1. /*
  2. * sample-7.js
  3. * Directions Serviceを利用する
  4. */
  5. var directionsDisplay;
  6. var directionsService;
  7. var map;
  8. var center = new google.maps.LatLng(35.681382, 139.766084);
  9. var start = '東京駅';
  10. var end = '東京スカイツリー';
  11. function initialize() {
  12. var mapOptions = {
  13. zoom: 14,
  14. center: center,
  15. mapTypeId: google.maps.MapTypeId.ROADMAP
  16. };
  17. map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  18. directionsDisplay = new google.maps.DirectionsRenderer();
  19. directionsDisplay.setMap(map);
  20. directionsDisplay.setPanel(document.getElementById('directionsPanel'));
  21. }
  22. function calcRoute() {
  23. var request = {
  24. origin: start,
  25. destination: end,
  26. travelMode: google.maps.TravelMode.DRIVING,
  27. avoidHighways: true,
  28. };
  29. directionsService = new google.maps.DirectionsService();
  30. directionsService.route(request, function(response, status) {
  31. if (status == google.maps.DirectionsStatus.OK) {
  32. directionsDisplay.setDirections(response);
  33. } else {
  34. alert('ルートが見つかりませんでした…');
  35. }
  36. });
  37. }
  38. google.maps.event.addDomListener(window, 'load', function() {
  39. initialize();
  40. calcRoute();
  41. });