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>
    <!--【2.0版】套用MaterializeCSS http://materializecss.com/getting-started.html ------------------>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"  media="screen,projection"/>
​
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
​
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
    <!----------------------------------------------------------------------------------------------->
    
    <meta charset="utf-8">
    <title>2.0版-套用MCSS</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 -->
    <!--【1.3版】改成Multiple routes http://stackoverflow.com/questions/30205160/?answertab=votes#tab-top -->
    <!--【2.0版】套用MaterializeCSS Navbar with Icon Links http://materializecss.com/navbar.html#icons -->
    <!--【2.0版】套用MaterializeCSS Striped Table http://materializecss.com/table.html#striped -->
    <!--【2.0版】套用MaterializeCSS Footer http://materializecss.com/footer.html -->
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #show_map {
        height: 50%;
      }
    </style>
  </head>
  
  <body>
    <!--【2.0版】套用MaterializeCSS Navbar with Icon Links http://materializecss.com/navbar.html#icons -->
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">交通安排與聯繫窗口</a>
        <ul class="right hide-on-med-and-down">
          <!-- i calss引用Material icons https://material.io/icons/ -->
          <li><a href="#"><i class="material-icons">search</i></a></li>
          <li><a href="#"><i class="material-icons">view_module</i></a></li>
          <li><a href="#"><i class="material-icons">refresh</i></a></li>
          <li><a href="#"><i class="material-icons">more_vert</i></a></li>
        </ul>
      </div>
    </nav>
    <!---------------------------------------------------------------------------------------------------->
    
    <div id="show_map"></div>
    
    <div>
      <!--【2.0版】套用MaterializeCSS Striped Table http://materializecss.com/table.html#striped --------->
      <table class="striped">
        <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>
    
    <!--【2.0版】套用MaterializeCSS Footer http://materializecss.com/footer.html ------------------------->
    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">X驗證中心</h5>
            <p class="grey-text text-lighten-4">X Certification Center</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        © 2017 Copyright
        <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
        </div>
      </div>
    </footer>
    <!---------------------------------------------------------------------------------------------------->
                
    <script>
        var directionsService = [];
        var 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版】+【1.3版】///////////////////////////////////////////////////////////////////////////////////////////
          // 加上Directions service https://developers.google.com/maps/documentation/javascript/examples/directions-simple
          // DirectionsRendererOptions -> polylineOptions -> strokeColor
          // https://developers.google.com/maps/documentation/javascript/reference?csw=1#DirectionsRendererOptions
          // https://developers.google.com/maps/documentation/javascript/reference?csw=1#PolylineOptions
          // DirectionsRendererOptions -> markerOptions -> visible
          // https://developers.google.com/maps/documentation/javascript/reference?csw=1#MarkerOptions
          for (var i=1 ; i>=0 ; i--) {
              directionsService[i] = new google.maps.DirectionsService();
              directionsDisplay[i] = new google.maps.DirectionsRenderer({polylineOptions: {strokeColor: (i==1)?"brown":"blue"},
                                                                         markerOptions: {visible: false}});
              directionsDisplay[i].setMap(mapObject);
              calculateAndDisplayRoute(i);
          }       
          ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        }
​
        // 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.3版】/////////////////////////////////////////////////////////////////////////////////////////////////
            // 呼叫calculateAndDisplayRoute()更新路線
            calculateAndDisplayRoute(1);
            calculateAndDisplayRoute(0);
            ////////////////////////////////////////////////////////////////////////////////////////////////////////////
          });
        }
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
​
        //【1.2版】+【1.3版】///////////////////////////////////////////////////////////////////////////////////////////
        // 加上Directions service https://developers.google.com/maps/documentation/javascript/examples/directions-simple
        // 改成Multiple routes http://stackoverflow.com/questions/30205160/?answertab=votes#tab-top
        function calculateAndDisplayRoute(i) {
          directionsService[i].route({
            origin: new google.maps.LatLng(Locations[i][1], Locations[i][2]),
            destination: new google.maps.LatLng(Locations[i+1][1], Locations[i+1][2]),
            // Lat/Lng Object Literal https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal
            travelMode: (i==1) ? google.maps.TravelMode.WALKING : 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[i].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