在Google地图上显示加载消息

Question

I'm trying to show a (loading....) message while my google map is loading. I have very little experience with maps and Java Script so, please excuse my code. The map was working, before I tried to add a sniplet of code to show a loading message. Now the map doesn't work at all, but I sure it's just an issue of putting the code in the wrong spot. (lack of skills) Can someone please show me what I doing wrong here.

<script type="text/javascript" src="./js/NauticalChartsAPI.js"></script>
  <script type="text/javascript" src="./js/gmapsv3ext.js"></script>
<script language="JavaScript" type="text/javascript" src="./js/jquery-1.2.6.js"></script>

<script type="text/javascript">

if (GBrowserIsCompatible()) {

    var maploaded = false
    var maploadTimer = 0


 function load(){
  //fire the 'loading' message
    checkGoogleMap()


    // Global scope
  var G = google.maps;
  var map;
  var api = new NauticalChartsAPI();

    /**
     * Initialize the Google map.
     */

}
    function init() {
      /**
       * boiler-plate Google Maps code.
       */
      var latlng = new G.LatLng(29.37895317, -91.75290604);
      var myOptions = {
        zoom: 9,
        center: new G.LatLng(29.37895317, -91.75290604),
        mapTypeId: G.MapTypeId.ROADMAP,
      mapTypeControl: true,
      mapTypeControlOptions: {
          style: G.MapTypeControlStyle.DROPDOWN_MENU
        },
      };



      var map = new G.Map(document.getElementById("map_canvas"),myOptions);

      map.addListener('click', (function () {
        var converter = function (value, labels) {
          var sign = value < 0 ? 0 : 1;
          var abs = Math.abs(Math.round(value * 1000000));
          var dec = abs % 1000000 / 1000000;
          var deg = Math.floor(abs / 1000000);
          var min = Math.floor(dec * 60);
          var sec = (dec - min / 60) * 3600;
          var result = '';
          result += deg;
          result += "\u00B0";
          result += ' ';
          result += (min < 10 ? '0' : '') + min;
          result += "\u0027";
          result += ' ';
          result += sec.toFixed(1) * 10;
          result += "\u0022";
          result += labels[sign];
          return result;
        };

        var marker;
        var popup;

        return function (e) {
          var latLng = e.latLng;
          if (!marker) {
            marker = new google.maps.Marker({
              map: map
            });
            popup = new google.maps.InfoWindow();
            marker.addListener('click', function () {
              if (popup && !popup.getMap()) {
                popup.open(map, marker);
              }
            })


          } else {
            popup.close();
          }
          var content = converter(latLng.lat(), ['S', 'N']) + '<br>' + converter(latLng.lng(), ['W', 'E']);
          marker.setTitle(content);
          marker.setPosition(latLng);
          popup.setContent('<p>' + content.replace(/ /g, '&nbsp;') + '</p>');
          popup.open(map, marker);
        };
      })());

      api.setMap(map);
    if( api.isLoaded() ) {
        // Select the panel we want.
        var panel = api.getPanelByFileName('1116A_1');
        // Compute and set center/zoom for optimal map coverage
        var bounds = panel.getBounds();
        map.setCenter(bounds.getCenter());
        // add panel as a tile layer
    var panelMapType = panel.getTileLayer();
    //alert(overlay.setOpacity(.2));
    //overlay.setOpacity(1);//this doesn't work!
    map.overlayMapTypes.insertAt(0,panelMapType);

}

//add the 'loaded' listener
    GEvent.addListener(map, 'tilesloaded', function(){
        maploaded = true
    });
    //add the 'map type changed' listener
    GEvent.addListener(map, 'maptypechanged', function(){
        resetCheckGoogleMap()
    });

    //add the 'zoom level changed' listener
    //GEvent.addListener(map, 'zoomend', function(){
        //resetCheckGoogleMap()
    //});

}

function checkGoogleMap() {
        //increment the timer every second
        maploadTimer = maploadTimer + 1

        //specify the target element for our messages
        var msg = document.getElementById('msg')

        if (maploaded == false) {
            //if we dont have a fully loaded map - show the message
            $("#msgContainer").slideDown("fast")
            //for the first 5 tries, show this message
            if (maploadTimer < 5) {
            msg.innerHTML = 'Loading map images from Google Maps...';
            }
            //loop it
            setTimeout('checkGoogleMap()',1000);
        } else {
            //otherwise, show 'loaded' message then hide the message after a second
            msg.innerHTML = 'Map loaded.'
            maploadTimer = 0;
            setTimeout('hideMsg()',1000);
        } 
        //if the timer get up to 20, show a different message
        if (maploadTimer >= 20 && maploadTimer <40 ) {
            msg.innerHTML = 'Sorry about the wait - your connection to Google Maps is a little slow.';
        }
        //if it gets to 40 show another different message with a reload link (for what its worth!)
        if (maploadTimer >= 40) {
            msg.innerHTML = 'Hmmm, still waiting! You can wait a bit longer or you could try <a href="javascript:load()">reloading the map</a>.';
        }
    }

function hideMsg() {    
        $("#msgContainer").slideUp("fast")
    }

function resetCheckGoogleMap() {
        maploaded = false
        maploadTimer = 0;
        checkGoogleMap();
    }

}
    else
      alert('api is not loaded!');
    }



    </script>
<style>

.map_canvas {

    position:absolute;
    top:50px;
    width:100%;
    height:90%;
}


}
#msgContainer {
    width:100%;
    height:30px;
    line-height:30px;
    background:#FFFFCC;
    position:absolute;
    z-index:100;
    left:0;
    top:0;
    display:none;
    font-size:1.2em;
    border-bottom:#FFCC66 1px solid;
}
#msg {
    padding-left:10px;
    text-align:center;
}


</style>



  </head>

  <body onLoad="init()">

<div id="msgContainer">
  <div id="msg"></div>
  </div>

    <div id="map_canvas" style="width:100%; height:90%;"></div>

  </body>
</html> 

Answer 1

GEvent is Google Maps Javascript API v2 syntax, if you are using v3 to equivalent is google.maps.event

//add the 'loaded' listener
    GEvent.addListener(map, 'tilesloaded', function(){
        maploaded = true
    });
    //add the 'map type changed' listener
    GEvent.addListener(map, 'maptypechanged', function(){
        resetCheckGoogleMap()
    });

should be:

//add the 'loaded' listener
    google.maps.event.addListener(map, 'tilesloaded', function(){
        maploaded = true
    });
    //add the 'map type changed' listener
    google.maps.event.addListener(map, 'maptypechanged', function(){
        resetCheckGoogleMap()
    });