How to Add Loading Message while Google Map Populates Directions

Question

I have the following script which will load directions to Las Vegas from the browser location:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 Directions Example</title>
<script type="text/javascript"
   src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
<div style="width: 600px;">
 <div id="map" style="width: 280px; height: 400px; float: left;"></div>
 <div id="panel" style="width: 300px; float: right;"></div>
</div>

<script type="text/javascript">

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);
   }
 });
}

</script>
</body>
</html>

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:

google.maps.event.addListenerOnce(map, 'idle', function(){
document.write("<p>please hold while loading</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?

idle event is fired when the map becomes idle after panning or zooming. — Nouphal.M, Jan 12 '14 at 17:51
hmmm... i see. So, do you have a suggestion for a good way to have a "loading" message while the map is determining the user's position? — codacopia, Jan 12 '14 at 17:56
http://stackoverflow.com/questions/832692/how-can-i-check-whether-google-maps-is-fully-loaded — Nouphal.M, Jan 12 '14 at 18:05
yes, that is where I got the idea for the `google.maps.event.addListenerOnce(map, 'idle', function(){ document.write("
please hold while loading
"); });` addition. I just am unsure on where to implement on my code. — codacopia, Jan 12 '14 at 18:08

score 0 · Accepted Answer · answered Jan 12 '14 at 18:25

Not sure but still try

<script type="text/javascript">
 document.write("<p id='loader'>please hold while loading</p>");
  .....
  ......
  function GetLocation(location) {
    ............................
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      document.getElementById('loader').innerHTML = "Map loaded";
    }

  }

</script>

How to Add Loading Message while Google Map Populates Directions

1 Answers1