topical media & game development
mashup-flickr-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.