title: How to Add Loading Message while Google Map Populates Directions
body: <p>I have the following script which will load directions to Las Vegas from the browser location:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Google Maps API v3 Directions Example&lt;/title&gt;
  &lt;script type="text/javascript"
     src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="font-family: Arial; font-size: 12px;"&gt;
  &lt;div style="width: 600px;"&gt;
   &lt;div id="map" style="width: 280px; height: 400px; float: left;"&gt;&lt;/div&gt;
   &lt;div id="panel" style="width: 300px; float: right;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var mylat,mylong,request;
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  
  var map = new google.maps.Map(document.getElementById('map'), {
     zoom:7,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   });
  
  navigator.geolocation.getCurrentPosition(GetLocation);
  function GetLocation(location) {
  
  mylat= location.coords.latitude;
  mylong = location.coords.longitude;
  request = {
  origin: mylat+','+mylong,
  destination: '35.580789,-105.210571',
     travelMode: google.maps.DirectionsTravelMode.DRIVING
   };
  
   directionsDisplay.setMap(map);
   directionsDisplay.setPanel(document.getElementById('panel'));
   directionsService.route(request, function(response, status) {
     if (status == google.maps.DirectionsStatus.OK) {
       directionsDisplay.setDirections(response);
     }
   });
  }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works great for what I need, but as you can see this leaves some down time while the page loads. I would like to add a message that tells the user to hold while the directions are loading.  From what I can tell I just need to add an event listener while loading.  Here is the sample I am trying to use:</p>
  
  <pre><code>google.maps.event.addListenerOnce(map, 'idle', function(){
  document.write("&lt;p&gt;please hold while loading&lt;/p&gt;");
  });
  </code></pre>
  
  <p>I have tried to add this to a few locations in the script, but it is not loading during the downtime, but rather after the page loads.  Any suggestions on how I can adjust this listener in the code for display only during downtime?</p>