title: html code for Google Maps not working properly
body: <p>I'm just learning how to use google maps in my code, but I'm having trouble getting the actual map to appear on the browser screen. All that appears are the two drop down boxes that allows the user to choose their starting and ending locations. Any help would be greatly appreciated!</p>
  
  <p><strong>Directions.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Google Maps JavaScript API v3 Example: Directions Simple&lt;/title&gt;
  &lt;link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script&gt;
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
  
    function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var chicago = new google.maps.LatLng(41.850033, -87.6500523);
      var mapOptions = {
        zoom:7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: chicago
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      directionsDisplay.setMap(map);
    }
  
    function calcRoute() {
      var start = document.getElementById('start').value;
      var end = document.getElementById('end').value;
      var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
      });
    }
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;body onload="initialize()"&gt;
   &lt;div&gt;
   &lt;b&gt;Start: &lt;/b&gt;
   &lt;select id="start" onchange="calcRoute();"&gt;
    &lt;option value="chicago, il"&gt;Chicago&lt;/option&gt;
    &lt;option value="st louis, mo"&gt;St Louis&lt;/option&gt;
    &lt;option value="joplin, mo"&gt;Joplin, MO&lt;/option&gt;
    &lt;option value="oklahoma city, ok"&gt;Oklahoma City&lt;/option&gt;
    &lt;option value="amarillo, tx"&gt;Amarillo&lt;/option&gt;
    &lt;option value="gallup, nm"&gt;Gallup, NM&lt;/option&gt;
    &lt;option value="flagstaff, az"&gt;Flagstaff, AZ&lt;/option&gt;
    &lt;option value="winona, az"&gt;Winona&lt;/option&gt;
    &lt;option value="kingman, az"&gt;Kingman&lt;/option&gt;
    &lt;option value="barstow, ca"&gt;Barstow&lt;/option&gt;
    &lt;option value="san bernardino, ca"&gt;San Bernardino&lt;/option&gt;
    &lt;option value="los angeles, ca"&gt;Los Angeles&lt;/option&gt;
  &lt;/select&gt;
  &lt;b&gt;End: &lt;/b&gt;
  &lt;select id="end" onchange="calcRoute();"&gt;
    &lt;option value="chicago, il"&gt;Chicago&lt;/option&gt;
    &lt;option value="st louis, mo"&gt;St Louis&lt;/option&gt;
    &lt;option value="joplin, mo"&gt;Joplin, MO&lt;/option&gt;
    &lt;option value="oklahoma city, ok"&gt;Oklahoma City&lt;/option&gt;
    &lt;option value="amarillo, tx"&gt;Amarillo&lt;/option&gt;
    &lt;option value="gallup, nm"&gt;Gallup, NM&lt;/option&gt;
    &lt;option value="flagstaff, az"&gt;Flagstaff, AZ&lt;/option&gt;
    &lt;option value="winona, az"&gt;Winona&lt;/option&gt;
    &lt;option value="kingman, az"&gt;Kingman&lt;/option&gt;
    &lt;option value="barstow, ca"&gt;Barstow&lt;/option&gt;
    &lt;option value="san bernardino, ca"&gt;San Bernardino&lt;/option&gt;
    &lt;option value="los angeles, ca"&gt;Los Angeles&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;div id="map-canvas" style="top:30px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>