Difference between revisions of "Widget:GTform"

From Transit.Wiki
(Created page with "<form action="http://www.google.com/transit"> <input type="hidden" name="ie" value="UTF8"> <input type="hidden" name="f" value="d"> Start adress <input type="text" style="widt...")
 
m (Text replacement - "jquery-1.7.2.min.js" to "jquery-3.4.1.min.js")
 
(31 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<form action="http://www.google.com/transit"> <input type="hidden" name="ie" value="UTF8"> <input type="hidden" name="f" value="d"> Start adress <input type="text" style="width:20em" size="20" name="saddr" tabindex="1" maxlength="2048"/> <br>e.g. 4412 se 17th ave, Portland, OR
+
<includeonly>
 +
<script src="https://apps.transitunlimited.org/jquery-3.4.1.min.js"></script>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 +
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyA1-YSOAtIlnU0ZcufMDLNjEVZDmq7sPh4"></script>
 +
<p id="note"></p>
 +
<div id="info">
 +
<button onclick="getLocation(1)">Trip from here</button>
 +
<button onclick="getLocation(2)">Trip to here</button>
 +
<button onclick="resetform()">Reset form</button>
 +
<br/>
 +
<div style="display:inline-block;margin:2px 0 2px 0;"><label>from</label>
 +
        <input class="input" type="text" id="from" value=""><span id="fromnote" style="display:none;">where I am at</span></div>
 +
<div style="display:inline-block;margin:2px 0 2px 0;"><label>to</label>
 +
  <input class="input" type="text" id="to" value=""><span id="tonote" style="display:none;">where I am at</span>.</div>
 +
<div style="margin:2px;">
 +
<form id="triptime" style="display:inline;" >
 +
  <input type="radio" name="triptime" value="depart" checked> Departing
 +
  <input type="radio" name="triptime" value="arrive"> arriving at
 +
  </form>
 +
<select id="depart">
 +
<option value="now" selected>Now</option>
 +
<option value="03:00">3:00 am</option>
 +
<option value="03:30">3:30 am</option>
 +
<option value="04:00">4:00 am</option>
 +
<option value="04:30">4:30 am</option>
 +
<option value="05:00">5:00 am</option>
 +
<option value="05:30">5:30 am</option>
 +
<option value="06:00">6:00 am</option>
 +
<option value="06:15">6:15 am</option>
 +
<option value="06:30">6:30 am</option>
 +
<option value="06:45">6:45 am</option>
 +
<option value="07:00">7:00 am</option>
 +
<option value="07:15">7:15 am</option>
 +
<option value="07:30">7:30 am</option>
 +
<option value="07:45">7:45 am</option>
 +
<option value="08:00">8:00 am</option>
 +
<option value="08:15">8:15 am</option>
 +
<option value="08:30">8:30 am</option>
 +
<option value="08:45">8:45 am</option>
 +
<option value="09:00">9:00 am</option>
 +
<option value="09:15">9:15 am</option>
 +
<option value="09:30">9:30 am</option>
 +
<option value="09:45">9:45 am</option>
 +
<option value="10:00">10:00 am</option>
 +
<option value="10:30">10:30 am</option>
 +
<option value="11:00">11:00 am</option>
 +
<option value="11:30">11:30 am</option>
 +
<option value="12:00">Noon</option>
 +
<option value="12:30">12:30 pm</option>
 +
<option value="13:00">1:00 pm</option>
 +
<option value="13:30">1:30 pm</option>
 +
<option value="14:00">2:00 pm</option>
 +
<option value="14:15">2:15 pm</option>
 +
<option value="14:30">2:30 pm</option>
 +
<option value="14:45">2:45 pm</option>
 +
<option value="15:00">3:00 pm</option>
 +
<option value="15:15">3:15 pm</option>
 +
<option value="15:30">3:30 pm</option>
 +
<option value="15:45">3:45 pm</option>
 +
<option value="16:00">4:00 pm</option>
 +
<option value="16:15">4:15 pm</option>
 +
<option value="16:30">4:30 pm</option>
 +
<option value="16:45">4:45 pm</option>
 +
<option value="17:00">5:00 pm</option>
 +
<option value="17:15">5:15 pm</option>
 +
<option value="17:30">5:30 pm</option>
 +
<option value="17:45">5:45 pm</option>
 +
<option value="18:00">6:00 pm</option>
 +
<option value="18:15">6:15 pm</option>
 +
<option value="18:30">6:30 pm</option>
 +
<option value="18:45">6:45 pm</option>
 +
<option value="19:00">7:00 pm</option>
 +
<option value="19:15">7:15 pm</option>
 +
<option value="19:30">7:30 pm</option>
 +
<option value="19:45">7:45 pm</option>
 +
<option value="20:00">8:00 pm</option>
 +
<option value="20:30">8:30 pm</option>
 +
<option value="21:00">9:00 pm</option>
 +
<option value="21:30">9:30 pm</option>
 +
<option value="22:00">10:00 pm</option>
 +
<option value="22:30">10:30 pm</option>
 +
<option value="23:00">11:00 pm</option>
 +
<option value="23:30">11:30 pm</option>
 +
<option value="00:00">Midnight</option>
 +
<option value="00:30">12:30 am</option>
 +
<option value="01:00">1:00 am</option>
 +
<option value="01:30">1:30 am</option>
 +
<option value="02:00">2:00 am</option>
 +
<option value="02:30">2:30 am</option>
 +
          </select> (time) today or next day or on
 +
          <input type="text" id="datepicker" size="7"> (date)</div>
 +
          <button id="go">Get Transit directions</button>
 +
      </div>
  
−
<!-- Code meeting location, date and time below --> <input type="hidden" name="daddr" value="Burnside St & SW Broadway, Portland, OR" <input type="hidden" name="ttype" value="arr"> <input type="hidden" name="date" value="2/13"> <input type="hidden" name="time" value="7:30pm">
+
<script type="text/javascript">
 +
(window.RLQ=window.RLQ||[]).push(function(){
 +
var nt1 = document.getElementById("note");
 +
var nt2 = document.getElementById("from");
 +
var nt2a = document.getElementById("fromnote");
 +
var nt3 = document.getElementById("to");
 +
var nt3a = document.getElementById("tonote");
 +
var tpk1 = document.getElementById("datepicker");
 +
 
 +
function resetform() {
 +
  nt2a.style.display = "none";
 +
  nt3a.style.display = "none";
 +
  nt2.style.display = "inline";
 +
  nt2.value="";
 +
  nt3.style.display = "inline";
 +
  nt3.value="";
 +
  tpk1.value="";
 +
  document.getElementById("depart").selectedIndex = 0;
 +
}
  
−
<!-- Optional location hint to help a partial address in saddr work. Get the sll and sspan values by moving the map over the area of interest in clicking on "Link". If you edit these don't forgot to remove them from the html comment. --> <!-- <input type="hidden" name="sspan" value="0.1232,0.2211"> <input type="hidden" name="sll" value="37.7587,-122.4415"> -->
+
function getLocation(ntq) {
 +
    if (ntq == 1) {
 +
  ntx=nt2; ntxa=nt2a; ntn=nt3; ntna=nt3a;
 +
  } else {
 +
  ntx=nt3; ntxa=nt3a; ntn=nt2; ntna=nt2a;
 +
  }
 +
    if (navigator.geolocation) {
 +
        navigator.geolocation.getCurrentPosition(showPosition);
 +
        ntx.style.display = "none";
 +
        ntxa.style.display = "inline";
 +
        setTimeout(function(){
 +
        map.setOptions({
 +
        center: ntxg,
 +
        zoom:14
 +
        });
 +
        },2000);
 +
        if (ntn.style.display=="none") {
 +
          ntn.style.display="inline";
 +
          ntn.value="";
 +
          ntna.style.display="none";
 +
        }
 +
    } else {
 +
        nt1.innerHTML = "Geolocation is not supported by this browser.";
 +
    return false;}
 +
}
 +
   
 +
function showPosition(position) {
 +
  ntx.value = position.coords.latitude + ', ' +  position.coords.longitude;
 +
  ntxg = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 +
}
  
−
<br><input type="submit" value="Get Directions" /> </form>
+
$(function () {
 +
    $( "#datepicker" ).datepicker();
 +
} );
 +
 
 +
      var directions = new google.maps.DirectionsService();
 +
      var renderer = new google.maps.DirectionsRenderer();
 +
      var map, transitLayer;
 +
 
 +
      function initialize() {
 +
        var mapOptions = {
 +
          zoom: 5,
 +
          center: new google.maps.LatLng(38.6, -114.6),
 +
          mapTypeId: google.maps.MapTypeId.ROADMAP
 +
        };
 +
 
 +
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
 +
 
 +
        google.maps.event.addDomListener(document.getElementById('go'), 'click',
 +
        route);
 +
 
 +
        transitLayer = new google.maps.TransitLayer();
 +
 
 +
        var control = document.getElementById('transit-wpr');
 +
 
 +
        google.maps.event.addDomListener(control, 'click', function() {
 +
          transitLayer.setMap(transitLayer.getMap() ? null : map);
 +
        });
 +
 
 +
        google.maps.event.addDomListener(window, "resize", function() {
 +
        google.maps.event.trigger(map, "resize");
 +
        map.setCenter(center);
 +
        });
 +
 
 +
        route();
 +
      }
 +
 
 +
function route() {
 +
        var triptime = $('input[name="triptime"]:checked', '#triptime').val();
 +
        var departure = document.getElementById('depart').value;
 +
        var tripdate = $('input[id="datepicker"]').datepicker('getDate');
 +
        if (departure=='now') {
 +
              var departureTime = null;
 +
              var arrivalTime = null;
 +
        } else {
 +
              var bits = departure.split(':');
 +
              var now = new Date();
 +
              var tzOffset = (now.getTimezoneOffset() + 60) * 60 * 1000;
 +
 
 +
              var time = new Date();
 +
              time.setHours(bits[0]);
 +
              time.setMinutes(bits[1]);
 +
 
 +
              var ms = time.getTime();
 +
              if (ms < now.getTime()) {
 +
              ms += 24 * 60 * 60 * 1000;
 +
              }
 +
         
 +
              if (tripdate == null) {         
 +
              departureTime = new Date(ms);
 +
              arrivalTime = null;
 +
              } else {
 +
              var datetimestring = new Date(tripdate.getFullYear(), tripdate.getMonth(), tripdate.getDate(), time.getHours(), time.getMinutes(), time.getSeconds());
 +
              departureTime = datetimestring;
 +
              arrivalTime = null;
 +
              }                   
 +
         
 +
              if (triptime == 'arrive') {
 +
              arrivalTime = departureTime;
 +
              departureTime = null;
 +
              }
 +
        }
 +
       
 +
        var request = {
 +
          origin: document.getElementById('from').value,
 +
          destination: document.getElementById('to').value,
 +
          travelMode: google.maps.DirectionsTravelMode.TRANSIT,
 +
          provideRouteAlternatives: true,
 +
          transitOptions: {
 +
            departureTime: departureTime,
 +
            arrivalTime: arrivalTime
 +
          }
 +
        };
 +
 
 +
        var panel = document.getElementById('panel');
 +
        panel.innerHTML = '';
 +
        directions.route(request, function(response, status) {
 +
          if (status == google.maps.DirectionsStatus.OK) {
 +
            renderer.setDirections(response);
 +
            renderer.setMap(map);
 +
            renderer.setPanel(panel);
 +
          } else {
 +
            renderer.setMap(null);
 +
            renderer.setPanel(null);
 +
          }
 +
        });
 +
 
 +
}
 +
 
 +
google.maps.event.addDomListener(window, 'load', initialize);
 +
});
 +
</script>
 +
    <div id="transit-wpr">
 +
</div>
 +
</includeonly>

Latest revision as of 01:36, 24 October 2023

Retrieved from "https://www.transit.wiki/index.php?title=Widget:GTform&oldid=237114"