HTML and CSS Reference
In-Depth Information
<div class="field">
<label for="units">Units:</label>
<select id="units">
<option value="IMPERIAL">Miles</option>
<option value="METRIC">Kilometers</option>
</select>
</div>
<div>
<input type="button" id="go" value="Get Directions" />
</div>
<div id="distance"></div>
<div id="map"></div>
We now need some JavaScript to do the following:
• Display a map of the United States on page load
• Handle the button click
• Get the user's current location
• Read the address input
• Pass the current location and address to the Google API to get the driving distance
between the two locations
• Update the Google Map with the suggested driving route
The code looks like this:
// Google Maps globals:
var directionRenderer;
var directionsService = new google.maps.DirectionsService();
var map;
$(document).ready(function () {
// Set up map starting point for Google Maps.
// Set initial coords to latitude −92 and longitude 32, which is somewhere
// around Kansas City in the center of the US, and then set the zoom to 4
// so the entire US is visible and centered.
var kansas = new google.maps.LatLng(32, −92);
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: kansas
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
// wire up button click
$('#go').click(function () {
// Use our new getLatLng with fallback and define an inline function to
// handle the callback.
