Google Maps Routing Options

Includes Transit

by nicolas tenorio

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<meta name="viewport" content="width=1024" />

<input type="text" id="routeFrom" name="routeFrom" value="Linz, Austria" />
<label for="routeFrom">From</label><br />

<input type="text" id="routeWaypoints" name="routeWaypoints" value="Hitzing  Wilherin, Austria" />
<label for="routeWaypoints">Waypoints</label><br />

<input type="text" id="routeTo" name="routeTo" value="Wilhering, Austria" />
<label for="routeTo">To</label><br />

<select id="routeMode" name="routeMode">
    <option value="DRIVING">Driving</option>
    <option value="WALKING">Walking</option>
    <option value="BICYCLING">Bicycling</option>
    <option value="TRANSIT">Transit</option>
</select>
<label for="routeMode">Mode</label><br />

<div class="textcenter">
    <button id="routeGo">Route</button>
    <button id="routeClear">Clear Route</button>
    <button id="routeCurrentPosition">Current Position</button>

</div>

<div id="map_canvas"></div>
<div id="directions"></div>

CSS

#map_canvas{
    width: 100%;
    height: 400px;
}
#directions {
    width: 100%;
}
body {
    font-size: 12px;
}

JavaScript

var directionsDisplay,directionsService,map,position,userLatLng;
    
$(window).load(function() {
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');

    google.load("maps", "3.x", {other_params: "sensor=false", callback:initialize});
});

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true });
    directionsService = new google.maps.DirectionsService();

    var mapOptions = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(          
            google.loader.ClientLocation.latitude,
            google.loader.ClientLocation.longitude
        ),
        preserveViewport: true
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directions"));
    
    $("#routeMode").on("change", function() { calcRoute(); });
    $("#routeGo").on("click", function() { calcRoute(); });
    $("#routeClear").on("click", function() { directionsDisplay.setDirections({ routes: [] }); });
    $("#routeCurrentPosition").on("click", function() { onPositionUpdate(position); });
    
    updatePosition();
}

function updatePosition() {
  //navigator.geolocation.getCurrentPosition(onPositionUpdate);
//var GeoMarker = new GeolocationMarker(map);
    navigator.geolocation.watchPosition( 
        onPositionUpdate, lost, 
        {maximumAge:0,enableHighAccuracy:true} 
    );
}

function lost() {};

function onPositionUpdate(newPosition) {
    console.log(position);
    
    position = newPosition;
    
    //position.coords.latitude, position.coords.longitude
    userLatLng = new google.maps.LatLng(
        position.coords.latitude, 
        position.coords.longitude
    );
    
    map.setCenter(userLatLng, 6);

    // Do whatever you want with userLatLng.
    var marker = new google.maps.Marker({
       ...