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.1版-更多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 -->
    <!--【2.1版】套用MaterializeCSS Grid http://materializecss.com/grid.html -->
    <!--【2.1版】套用MaterializeCSS Section & Divider http://materializecss.com/grid.html#grid-layouts -->
    <!--【2.1版】套用MaterializeCSS Form http://materializecss.com/forms.html -->
    <!--【2.1版】套用MaterializeCSS Cards http://materializecss.com/cards.html#fab -->
    <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 http://materializecss.com/icons.html 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>
    <!---------------------------------------------------------------------------------------------------->
    
    <!--【2.1版】套用MaterializeCSS Grid http://materializecss.com/grid.html  ---------------------------->
    <div class="container">
      <div class="row">
        <div class="col s4">
          <div class="center">
            <!-- i calss引用Material icons http://materializecss.com/icons.html https://material.io/icons/ -->
            <!-- i style引用HTML Color Names http://www.w3schools.com/colors/colors_names.asp -->
            <i class="large material-icons" style="color:MediumSlateBlue;">directions</i>
            <h5>1.校內位置</h5>
            <p class="light center">請標示貴單位的大門口、停車場、目的地，以便自行至貴單位的稽核人員參考。</p>
          </div>
        </div>
        <div class="col s4">
          <div class="center">
            <i class="large material-icons" style="color:MediumSlateBlue;">directions_transit</i>
            <h5>2.接送服務</h5>
            <p class="light center">請註明貴單位可提供的至高鐵、台鐵、捷運等接送方式，以便讓需要接送的稽核人員參考。</p>
          </div>
        </div>
        <div class="col s4">
          <div class="center">
            <i class="large material-icons" style="color:MediumSlateBlue;">contact_phone</i>
            <h5>3.聯繫窗口</h5>
            <p class="light center">請依本中心規定，提供稽核當天貴單位的相關窗口人員聯繫資訊。</p>
          </div>
        </div>
       </div> 
    </div>
    <!---------------------------------------------------------------------------------------------------->
    
    <!--【2.1版】套用MaterializeCSS Section & Divider http://materializecss.com/grid.html#grid-layouts --->
    <div class="container">
      <div class="divider"></div>
      <div class="section">
        <h5>Step 1</h5>
      </div>
    </div>
    <!---------------------------------------------------------------------------------------------------->
    
    <div class="container" id="show_map"></div>
    
    <div class="container">
      <!--【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.1版】套用MaterializeCSS Section & Divider http://materializecss.com/grid.html#grid-layouts --->
    <div class="container">
      <div class="divider"></div>
      <div class="section">
        <h5>Step 2</h5>
      </div>
    </div>
    <!---------------------------------------------------------------------------------------------------->
​
    <!--【2.1版】套用MaterializeCSS Form http://materializecss.com/forms.html ---------------------------->
    <div class="container">
      <div class="row">
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:DarkOrange;">directions_railway</i>
          <input id="A00" type="text" class="validate">
          <label for="A00">高鐵站名&幾號出口</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:DarkOrange;">access_alarm</i>
          <input id="A01" type="text" class="validate">
          <label for="A01">到達會面點時間</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:DarkOrange;">account_circle</i>
          <input id="A02" type="text" class="validate">
          <label for="A02">接送服務人員姓名</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:DarkOrange;">phone</i>
          <input id="A03" type="tel" class="validate">
          <label for="A03">連絡電話</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:DarkBlue;">train</i>
          <input id="A10" type="text" class="validate">
          <label for="A10">台鐵站名&幾號出口</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:DarkBlue;">access_alarm</i>
          <input id="A11" type="text" class="validate">
          <label for="A11">到達會面點時間</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:DarkBlue;">account_circle</i>
          <input id="A12" type="text" class="validate">
          <label for="A12">接送服務人員姓名</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:DarkBlue;">phone</i>
          <input id="A13" type="tel" class="validate">
          <label for="A13">連絡電話</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:RoyalBlue;">tram</i>
          <input id="A20" type="text" class="validate">
          <label for="A20">捷運站名&幾號出口</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:RoyalBlue;">access_alarm</i>
          <input id="A21" type="text" class="validate">
          <label for="A21">到達會面點時間</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:RoyalBlue;">account_circle</i>
          <input id="A22" type="text" class="validate">
          <label for="A22">接送服務人員姓名</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:RoyalBlue;">phone</i>
          <input id="A23" type="tel" class="validate">
          <label for="A23">連絡電話</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:SkyBlue;">hotel</i>
          <input id="A30" type="text" class="validate">
          <label for="A30">可至哪些飯店接送</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:SkyBlue;">access_alarm</i>
          <input id="A31" type="text" class="validate">
          <label for="A31">到達飯店時間</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:SkyBlue;">account_circle</i>
          <input id="A32" type="text" class="validate">
          <label for="A32">接送服務人員姓名</label>
        </div>
        <div class="input-field col s3">
          <i class="material-icons prefix" style="color:SkyBlue;">phone</i>
          <input id="A33" type="tel" class="validate">
          <label for="A33">連絡電話</label>
        </div>
      </div>
    </div>
    <!---------------------------------------------------------------------------------------------------->
    
    <!--【2.1版】套用MaterializeCSS Section & Divider http://materializecss.com/grid.html#grid-layouts --->
    <div class="container">
      <div class="divider"></div>
      <div class="section">
        <h5>Step 3</h5>
      </div>
    </div>
    <!---------------------------------------------------------------------------------------------------->
​
    <!--【2.1版】套用MaterializeCSS Cards http://materializecss.com/cards.html#fab ----------------------->
    <div class="container">
      <div class="row">
        <div class="col s12">
          <div class="card">
            <div class="card-image">
              <img src="12x1.jpg">
              <span class="card-title"><i class="material-icons">contact_phone</i> 總窗口(資安/個資)</span>
            </div>
            <div class="card-content">
                <p>
                  <div class="row">
                    <div class="input-field col s3 offset-s1">
                      <i class="material-icons prefix">account_circle</i>
                      <input id="B00" type="text" class="validate">
                      <label for="B00">姓名</label>
                    </div>
                    <div class="input-field col s3">
                      <i class="material-icons prefix">phone</i>
                      <input id="B01" type="tel" class="validate">
                      <label for="B01">電話</label>
                    </div>
                    <div class="input-field col s4">
                      <i class="material-icons prefix">email</i>
                      <input id="B02" type="tel" class="validate">
                      <label for="B02">Email</label>
                    </div>
                  </div>
                </p>          
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          <div class="card">
            <div class="card-image">
              <img src="12x1.jpg">
              <span class="card-title"><i class="material-icons">people_outline</i> 資安長官</span>
            </div>
            <div class="card-content">
                <p>
                  <div class="row">
                    <div class="input-field col s3 offset-s1">
                      <i class="material-icons prefix">account_circle</i>
                      <input id="C00" type="text" class="validate">
                      <label for="C00">資安長姓名&職稱</label>
                    </div>
                    <div class="input-field col s3">
                      <i class="material-icons prefix">phone</i>
                      <input id="C01" type="tel" class="validate">
                      <label for="C01">電話</label>
                    </div>
                    <div class="input-field col s4">
                      <i class="material-icons prefix">email</i>
                      <input id="C02" type="tel" class="validate">
                      <label for="C02">Email</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s3 offset-s1">
                      <i class="material-icons prefix">account_circle</i>
                      <input id="C10" type="text" class="validate">
                      <label for="C10">資安官姓名&職稱</label>
                    </div>
                    <div class="input-field col s3">
                      <i class="material-icons prefix">phone</i>
                      <input id="C11" type="tel" class="validate">
                      <label for="C11">電話</label>
                    </div>
                    <div class="input-field col s4">
                      <i class="material-icons prefix">email</i>
                      <input id="C12" type="tel" class="validate">
                      <label for="C12">Email</label>
                    </div>
                  </div>
                </p>          
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          <div class="card">
            <div class="card-image">
              <img src="12x1.jpg">
              <span class="card-title"><i class="material-icons">group_add</i> 各組窗口(資安/個資)</span>
              <!-- The floating circular action button http://materializecss.com/buttons.html -->
              <a class="btn-floating waves-effect waves-light red" style="position:absolute;right:24px;bottom:0;-webkit-transform:translateY(50%);transform:translateY(50%)"><i class="material-icons">add</i></a>
              <!-- 有關FABs in Cards的位置，只在class套用halfway-fab屬性並無法同官網範例呈現的效果是介於card-image與card-content之間。
              於是，進一步查閱其原始碼發現其另訂CSS對於halfway-fab屬性設定了position,right,bottom,-webkit-transform,...這些style屬性-->
            </div>
            <div class="card-content">
                <p>
                  <div class="row">
                    <div class="input-field col s3 offset-s1">
                      <i class="material-icons prefix">account_circle</i>
                      <input id="D00" type="text" class="validate">
                      <label for="D00">組別&姓名</label>
                    </div>
                    <div class="input-field col s3">
                      <i class="material-icons prefix">phone</i>
                      <input id="D01" type="tel" class="validate">
                      <label for="D01">電話</label>
                    </div>
                    <div class="input-field col s4">
                      <i class="material-icons prefix">email</i>
                      <input id="D02" type="tel" class="validate">
                      <label for="D02">Email</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s3 offset-s1">
                      <i class="material-icons prefix">account_circle</i>
                      <input id="D10" type="text" class="validate">
                      <label for="D10">組別&姓名</label>
                    </div>
                    <div class="input-field col s3">
                      <i class="material-icons prefix">phone</i>
                      <input id="D11" type="tel" class="validate">
                      <label for="D11">電話</label>
                    </div>
                    <div class="input-field col s4">
                      <i class="material-icons prefix">email</i>
                      <input id="D12" type="tel" class="validate">
                      <label for="D12">Email</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s3 offset-s1">
                      <i class="material-icons prefix">account_circle</i>
                      <input id="D20" type="text" class="validate">
                      <label for="D20">組別&姓名</label>
                    </div>
                    <div class="input-field col s3">
                      <i class="material-icons prefix">phone</i>
                      <input id="D21" type="tel" class="validate">
                      <label for="D21">電話</label>
                    </div>
                    <div class="input-field col s4">
                      <i class="material-icons prefix">email</i>
                      <input id="D22" type="tel" class="validate">
                      <label for="D22">Email</label>
                    </div>
                  </div>
                </p>          
            </div>
          </div>
        </div>
      </div>
    </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