Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>1.2版-加上路線</title>
    <!--【1.0版】主架構參考Complex icons https://developers.google.com/maps/documentation/javascript/examples/icon-complex -->
    <!--【1.1版】加上Dragend listener http://stackoverflow.com/questions/12828044/?answertab=votes#tab-top -->
    <!--【1.2版】加上Directions service https://developers.google.com/maps/documentation/javascript/examples/directions-simple -->
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #show_map {
        height: 50%;
      }
    </style>
  </head>
  
  <body>
    <div id="show_map"></div>
    
    <div>
      <table>
        <tbody>
          <tr>
            <td>大門口</td>
            <td id="marker0"></td>
          </tr>
          <tr>
            <td>停車場</td>
            <td id="marker1"></td>
          </tr>
          <tr>
            <td>目的地</td>
            <td id="marker2"></td>
          </tr>
        </tbody>
      </table>
    </div>
      
    <script>
        var directionsService, directionsDisplay;
        
        function initMap() {
          var mapObject = new google.maps.Map(document.getElementById('show_map'), {
            zoom: 17,
            center: {lat: 0, lng: 0}    // 地圖中心點不重要了，用Directions service加上路線後就會以路線完整呈現為可視範圍
          });
          setMarkers(mapObject);
          
          //【1.2版】/////////////////////////////////////////////////////////////////////////////////////////////////////
          // 加上Directions service https://developers.google.com/maps/documentation/javascript/examples/directions-simple
          directionsService = new google.maps.DirectionsService();
          directionsDisplay = new google.maps.DirectionsRenderer();
          directionsDisplay.setMap(mapObject);
          calculateAndDisplayRoute();
          ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        }
​
        // Data for the locations(大門口、停車場、目的地) consisting of a icon filename and a LatLng.
        var Locations = [
          ['大門口', 24.123718, 120.675020],
          ['停車場', 24.121448, 120.676701],
          ['目的地', 24.121331, 120.677141]
        ];
​
        function setMarkers(mapObject) {
          var icon = ['https://goo.gl/AbAMiB', 'https://goo.gl/NziqIX', 'https://goo.gl/WuwBuk'];
          // Adds markers to the mapObject.
          for (var i = 0; i < Locations.length; i++) {
            var thisone = Locations[i];
            var marker = new google.maps.Marker({
              position: {lat: thisone[1], lng: thisone[2]},
              map: mapObject,
              icon:{
                    url: icon[i],
                    size: new google.maps.Size(32, 32),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(15, 15)
                   },
              draggable: true   
              // 建立可拖曳的標記 https://developers.google.com/maps/documentation/javascript/markers?hl=zh-tw#draggable
            });
            // 在表格中呈現陣列座標值
            document.getElementById("marker"+i).innerHTML = Locations[i][1].toPrecision(8) + ', ' + Locations[i][2].toPrecision(9);
            
            //【1.1版】/////////////////////////////////////////////////////////////////////////////////////////////////
            listenMarker(marker,i);
            // 將標記監聽事件獨立成一個函式執行 (若直接將程序包在這個迴圈裡，i不會依序0,1,2喔，可以解除下列註解觀察看看)
            // google.maps.event.addListener(marker,'dragend',function(evt) {
            //   alert(i);
            // });
            ////////////////////////////////////////////////////////////////////////////////////////////////////////////
          }
        }
        
        //【1.1版】/////////////////////////////////////////////////////////////////////////////////////////////////////
        // 將標記監聽事件獨立成一個函式執行
        function listenMarker(marker,i) {
          // 下列監聽事件語法參考自 http://stackoverflow.com/questions/12828044/?answertab=votes#tab-top
          google.maps.event.addListener(marker,'dragend',function(evt) {
            // 標記移動須變更Locations陣列裡的座標值
            Locations[i][1] = evt.latLng.lat();
            Locations[i][2] = evt.latLng.lng();
            // 在表格中呈現變更後的陣列座標值
            document.getElementById("marker"+i).innerHTML = Locations[i][1].toPrecision(8) + ', ' + Locations[i][2].toPrecision(9);
​
            //【1.2版】/////////////////////////////////////////////////////////////////////////////////////////////////
            // 呼叫calculateAndDisplayRoute()更新路線
            calculateAndDisplayRoute();
            ////////////////////////////////////////////////////////////////////////////////////////////////////////////
          });
        }
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
​
        //【1.2版】/////////////////////////////////////////////////////////////////////////////////////////////////////
        // 加上Directions service https://developers.google.com/maps/documentation/javascript/examples/directions-simple
        function calculateAndDisplayRoute() {
          directionsService.route({
            origin: new google.maps.LatLng(Locations[0][1], Locations[0][2]),
            destination: new google.maps.LatLng(Locations[2][1], Locations[2][2]),
            // Lat/Lng Object Literal https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal
            waypoints: [ {location: new google.maps.LatLng(Locations[1][1], Locations[1][2]), stopover: true} ],
            // Using Waypoints in Routes https://developers.google.com/maps/documentation/javascript/directions#Waypoints
            travelMode: google.maps.TravelMode.DRIVING  
            // Travel modes in directions https://developers.google.com/maps/documentation/javascript/directions#TravelModes
          }, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        }
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    </script>
    
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
  </body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers