Loader Examples

You can use the loader with a couple of lines of code.

  1. Include the loader in your document header.
  2. <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/loader/release/loader_packed.js" type="text/javascript"></script>
  3. Call the load() function.
  4. google.load("maps", "2");
    google.setOnLoadCallback(mapsLoaded);
    
    function mapsLoaded () {
      if (google.maps.BrowserIsCompatible()) {
        map = new google.maps.Map2(document.getElementById("map"));
        map.addControl(new google.maps.SmallMapControl());
        map.setCenter(new google.maps.LatLng(48.25, 11.00), 4);
        map.enableDoubleClickZoom();
        google.extensions.maps.load("markermanager", "x", {uncompressed: true, callback: doWeatherDemo});
        google.extensions.maps.load("dragzoom", "x", {callback: addZoomer});
        google.extensions.maps.setOnloadCallback(function () {alert("All Libraries Loaded.");});
      }
    }
    
    function addZoomer () {
      map.addControl(new google.extensions.maps.DragZoom.Control());
    }
    
    function doWeatherDemo () {
      var IMAGES = [ "sun", "rain", "snow", "storm" ];
      var ICONS = [];
      function getWeatherIcon() {
        var i = Math.floor(IMAGES.length*Math.random());
        if (!ICONS[i]) {
          var icon = new google.maps.Icon();
          icon.image = "../markermanager/examples/images/" + IMAGES[i] + ".png";
          icon.iconAnchor = new google.maps.Point(16, 16);
          icon.infoWindowAnchor = new google.maps.Point(16, 0);
          icon.iconSize = new google.maps.Size(32, 32);
          icon.shadow = "../markermanager/examples/images/" + IMAGES[i] + "-shadow.png";
          icon.shadowSize = new google.maps.Size(59, 32);
          ICONS[i] = icon;
        }
        return ICONS[i];
      }
      function getRandomPoint() {
        var lat = 48.25 + (Math.random() - 0.5)*14.5;
        var lng = 11.00 + (Math.random() - 0.5)*36.0;
        return new google.maps.LatLng(Math.round(lat*10)/10, Math.round(lng*10)/10);
      }
      function getWeatherMarkers(n) {
        var batch = [];
        for (var i = 0; i < n; ++i) {
          batch.push(new google.maps.Marker(getRandomPoint(), { icon: getWeatherIcon() }));
        }
        return batch;
      }
      var mgr = new google.extensions.maps.MarkerManager(map);
      mgr.addMarkers(getWeatherMarkers(20), 3);
      mgr.addMarkers(getWeatherMarkers(200), 6);
      mgr.addMarkers(getWeatherMarkers(1000), 8);
      mgr.refresh();
    }
    

    View example (loader.html)