topical media & game development

talk show tell print

mashup-flickr-14-Complete-lib-js-map.js / js



  var markers = new Array();
  var photoIds = new Array();
  
  function doMap()
  {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(0, 0), 1);
      
      var bounds = map.getBounds();
      var southWest = bounds.getSouthWest();
      var northEast = bounds.getNorthEast();
      
      var s = "swlat=" + southWest.lat() 
            + "&swlng=" + southWest.lng() 
            + "&nelat="  + northEast.lat() 
            + "&nelng=" + northEast.lng();
      
      GDownloadUrl("geo.php?" + s, function(data, responseCode) 
      {            
          var xml = GXml.parse(data);
          var photos = xml.documentElement.getElementsByTagName("photo");
           
          var listHtml = "";
  
          for (var i = 0; i < photos.length; i++) 
          {
            var id = photos[i].getAttribute("id");
            var title = photos[i].getAttribute("title");
            if (title == "")
            {
              title = "Untitled";
            }
            var latitude = parseFloat(photos[i].getAttribute("latitude"));
            var longitude = parseFloat(photos[i].getAttribute("longitude"));
            var point = new GLatLng(latitude, longitude);
      
            map.addOverlay(createMarker(point, id));
      
            var className = (i%2 == 0) ? "even" : "odd";
      
            listHtml += "<li class=\"" + className + "\">" 
              + "<a href=\"#\" onclick=\"displayMarkerInfo(" 
              + i + "); return false;\">" 
              + title + "</a></li>";
          }
          var markerList = document.getElementById('marker-list');
          markerList.innerHTML = listHtml;
        });
  }
  
  function createMarker(point, id)
  {
    var marker = new GMarker(point);
    markers.push(marker);
    photoIds.push(id);
    var index = markers.length - 1;
  
    GEvent.addListener(marker, "click", function() 
    {
      displayMarkerInfo(index);
    });
  
    return marker;
  }
  
  function displayMarkerInfo(index)
  {
    var marker = markers[index];
    var id = photoIds[index];
  
    GDownloadUrl("geoview.php?id=" + id, function(data, responseCode) 
    {
      marker.openInfoWindowHtml(data);
    });
  }
  
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.