title: Google map with marker not displayed using the HTML5 Geolocation API
body: <p>I tried to replicate the following example. 
  <a href="http://viralpatel.net/blogs/html5-geolocation-api-tutorial-example/" rel="nofollow">http://viralpatel.net/blogs/html5-geolocation-api-tutorial-example/</a></p>
  
  <p>I am not able to view the map other than Latitude and Longitude on the browser. Same works when I hit the "Show my location on Map" button on the link above.</p>
  
  <p>Am I missing something in this HTML?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript"
              src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var map = null;
          function showlocation() {
              // One-shot position request.
              navigator.geolocation.getCurrentPosition(callback, errorHandler);
          }
  
          function callback(position) {
  
              var lat = position.coords.latitude;
              var lon = position.coords.longitude;
  
              document.getElementById('latitude').innerHTML = lat;
              document.getElementById('longitude').innerHTML = lon;
  
              var latLong = new google.maps.LatLng(lat, lon);
  
              var marker = new google.maps.Marker({
                  position: latLong
              });
  
              marker.setMap(map);
              map.setZoom(8);
              map.setCenter(marker.getPosition());
          }
  
          google.maps.event.addDomListener(window, 'load', initMap);
          function initMap() {
              var mapOptions = {
                  center: new google.maps.LatLng(0, 0),
                  zoom: 1,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              map = new google.maps.Map(document.getElementById("mapdiv"),
                                                mapOptions);
  
          }
  
          function errorHandler(error) {
              switch (error.code) {
                  case error.PERMISSION_DENIED:
                      alert("User denied the request for Geolocation.");
                      break;
                  case error.POSITION_UNAVAILABLE:
                      alert("Location information is unavailable.");
                      break;
                  case error.TIMEOUT:
                      alert("The request to get user location timed out.");
                      break;
                  case error.UNKNOWN_ERROR:
                      alert("An unknown error occurred.");
                      break;
              }
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;center&gt;
          &lt;input type="button" value="Show my location on Map"
                 onclick="javascript:showlocation()" /&gt;   &lt;br /&gt;
      &lt;/center&gt;
  
      Latitude: &lt;span id="latitude"&gt;&lt;/span&gt;       &lt;br /&gt;
      Longitude: &lt;span id="longitude"&gt;&lt;/span&gt;
      &lt;br /&gt;&lt;br /&gt;
      &lt;div&gt;Map&lt;/div&gt;
      &lt;div id="mapdiv" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>