if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventually be placed in the sidebar
var sidebar_html = "";
// arrays to hold copies of the markers and html used by the sidebar
// because the function closure trick doesnt work there
var htmls = [];
var gmarkers = [];
var points = [];
var i = 0;
// A function to create the marker and set up the event window
// IF statements assign icons to the markers based on the "color" variable
function createMarker(point,name,imgurl,color,address,html) {
if (color == "kitty1")
var marker = new GMarker(point, icon0);
if (color == "kitty")
var marker = new GMarker(point, icon1);
if (color == "photo")
var marker = new GMarker(point, icon2);
if (color == "note")
var marker = new GMarker(point, icon3);
if (color == "vw")
var marker = new GMarker(point, icon4);
if (color == "home")
var marker = new GMarker(point, icon5);
if (color == "drink")
var marker = new GMarker(point, icon6);
if (color == "eat")
var marker = new GMarker(point, icon7);
if (color == "sleep")
var marker = new GMarker(point, icon8);
if (color == "tree")
var marker = new GMarker(point, icon9);
if (color == "see")
var marker = new GMarker(point, icon10);
if (color == "star")
var marker = new GMarker(point, icon11);
if (color == "peep")
var marker = new GMarker(point, icon12);
htmls[i] = html;
GEvent.addListener(marker, "click", function() {
map.closeInfoWindow();
marker.openInfoWindowHtml(html);
loadDetailMap2(point);
});
// save the info we need to use later for the sidebar
gmarkers[i] = marker;
points[i] = point;
// add a line to the sidebar html
sidebar_html += ' | ' + name + ' | ';
i++;
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i, point) {
map.closeInfoWindow();
gmarkers[i].openInfoWindowHtml(htmls[i])
loadDetailMap(i);
}
// Create our custom marker icons
var icon0 = new GIcon();
icon0.image = "img/kitty1.gif";
icon0.shadow = "img/k1shadow.png";
icon0.iconSize = new GSize(18, 16);
icon0.shadowSize = new GSize(26, 20);
icon0.iconAnchor = new GPoint(8, 8);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(48, 45);
var icon1 = new GIcon();
icon1.image = "img/kitty.gif";
icon1.shadow = "img/kshadow.png";
icon1.iconSize = new GSize(18, 16);
icon1.shadowSize = new GSize(26, 20);
icon1.iconAnchor = new GPoint(8, 8);
icon1.infoWindowAnchor = new GPoint(9, 2);
icon1.infoShadowAnchor = new GPoint(48, 45);
var icon2 = new GIcon();
icon2.image = "img/photo.png";
icon2.shadow = "img/photos.png";
icon2.iconSize = new GSize(18, 16);
icon2.shadowSize = new GSize(26, 24);
icon2.iconAnchor = new GPoint(8, 18);
icon2.infoWindowAnchor = new GPoint(9, 2);
icon2.infoShadowAnchor = new GPoint(18, 25);
var icon3 = new GIcon();
icon3.image = "img/note.png";
icon3.shadow = "img/notes.png";
icon3.iconSize = new GSize(18, 18);
icon3.shadowSize = new GSize(26, 25);
icon3.iconAnchor = new GPoint(8, 18);
icon3.infoWindowAnchor = new GPoint(9, 2);
icon3.infoShadowAnchor = new GPoint(18, 25);
var icon4 = new GIcon();
icon4.image = "img/vw.png";
icon4.shadow = "img/vws.png";
icon4.iconSize = new GSize(24, 24);
icon4.shadowSize = new GSize(30, 30);
icon4.iconAnchor = new GPoint(8, 8);
icon4.infoWindowAnchor = new GPoint(9, 2);
icon4.infoShadowAnchor = new GPoint(38, 38);
var icon5 = new GIcon();
icon5.image = "img/home.png";
icon5.shadow = "img/homes.png";
icon5.iconSize = new GSize(18, 17);
icon5.shadowSize = new GSize(24, 25);
icon5.iconAnchor = new GPoint(8, 8);
icon5.infoWindowAnchor = new GPoint(9, 2);
icon5.infoShadowAnchor = new GPoint(28, 25);
var icon6 = new GIcon();
icon6.image = "img/drink.png";
icon6.shadow = "img/drinks.png";
icon6.iconSize = new GSize(21, 22);
icon6.shadowSize = new GSize(29, 29);
icon6.iconAnchor = new GPoint(8, 8);
icon6.infoWindowAnchor = new GPoint(9, 2);
icon6.infoShadowAnchor = new GPoint(28, 25);
var icon7 = new GIcon();
icon7.image = "img/eat.png";
icon7.shadow = "img/eats.png";
icon7.iconSize = new GSize(14, 17);
icon7.shadowSize = new GSize(22, 25);
icon7.iconAnchor = new GPoint(8, 8);
icon7.infoWindowAnchor = new GPoint(9, 2);
icon7.infoShadowAnchor = new GPoint(28, 25);
var icon8 = new GIcon();
icon8.image = "img/sleep.png";
icon8.shadow = "img/sleeps.png";
icon8.iconSize = new GSize(20, 14);
icon8.shadowSize = new GSize(25, 20);
icon8.iconAnchor = new GPoint(8, 8);
icon8.infoWindowAnchor = new GPoint(9, 2);
icon8.infoShadowAnchor = new GPoint(28, 25);
var icon9 = new GIcon();
icon9.image = "img/tree.png";
icon9.shadow = "img/trees.png";
icon9.iconSize = new GSize(17, 26);
icon9.shadowSize = new GSize(23, 32);
icon9.iconAnchor = new GPoint(8, 8);
icon9.infoWindowAnchor = new GPoint(9, 2);
icon9.infoShadowAnchor = new GPoint(28, 25);
var icon10 = new GIcon();
icon10.image = "img/see.png";
icon10.shadow = "img/sees.png";
icon10.iconSize = new GSize(19, 24);
icon10.shadowSize = new GSize(23, 31);
icon10.iconAnchor = new GPoint(8, 8);
icon10.infoWindowAnchor = new GPoint(9, 2);
icon10.infoShadowAnchor = new GPoint(28, 25);
var icon11 = new GIcon();
icon11.image = "img/star.png";
icon11.shadow = "img/stars.png";
icon11.iconSize = new GSize(16, 17);
icon11.shadowSize = new GSize(22, 23);
icon11.iconAnchor = new GPoint(8, 8);
icon11.infoWindowAnchor = new GPoint(9, 2);
icon11.infoShadowAnchor = new GPoint(28, 25);
var icon12 = new GIcon();
icon12.image = "img/lju.png";
icon12.shadow = "img/ljus.png";
icon12.iconSize = new GSize(17, 17);
icon12.shadowSize = new GSize(25, 25);
icon12.iconAnchor = new GPoint(8, 8);
icon12.infoWindowAnchor = new GPoint(9, 2);
icon12.infoShadowAnchor = new GPoint(28, 25);
var iconSmall = new GIcon();
iconSmall.image="img/pin_blue.png";
iconSmall.shadow = "img/xshadow.png";
iconSmall.iconSize = new GSize(16,16);
iconSmall.shadowSize = new GSize(30, 28);
iconSmall.iconAnchor = new GPoint(8, 8);
iconSmall.infoWindowAnchor = new GPoint(9, 2);
iconSmall.infoShadowAnchor = new GPoint(22, 25);
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(42.380025, -93.940625), 4, G_NORMAL_MAP);
ovcontrol = new GOverviewMapControl(new GSize(100,100));
map.addControl(ovcontrol);
setOverviewPos();
function loadDetailMap(i){
var point = points[i];
var detailmap = new GMap2(document.getElementById("map2"));
// detailmap.addControl(new GSmallMapControl());
// detailmap.addControl(new GMapTypeControl());
detailmap.addControl(new GSmallZoomControl());
detailmap.setCenter(point, 15);
detailmap.setMapType(G_SATELLITE_TYPE);
detailmap.addOverlay(new GMarker(point, iconSmall));
}
function loadDetailMap2(point){
var detailmap = new GMap2(document.getElementById("map2"));
//detailmap.addControl(new GSmallMapControl());
// detailmap.addControl(new GMapTypeControl());
detailmap.addControl(new GSmallZoomControl());
detailmap.setCenter(point, 15);
detailmap.setMapType(G_SATELLITE_TYPE);
detailmap.addOverlay(new GMarker(point,iconSmall));
}
// Track the mouse and update the cordinates in a "window"
GEvent.addListener(map, "mousemove",
function(point) {
var latLngStr6 = point.y.toFixed(6) + ', ' + point.x.toFixed(6);
var intro = 'Lat / Lng : ';
document.getElementById( "mymouseposition" ).innerHTML = intro+latLngStr6;
});
// used to display lat/lng in diag field - use for copying to locations file
GEvent.addListener(map, "click", function(mark, point){
// document.getElementById("message").innerHTML = 'Longitude: ' + point.x + ' | ' + ' Latitude: ' + point.y + '';
document.getElementById("message").innerHTML = 'lat="' + point.y + '" lng="' + '' + point.x + '"';
});
// Read the data from markers.xml
function loadMarkers() {
map.clearOverlays();
sidebar_html = "";
var request = GXmlHttp.create();
request.open("GET", "markers.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var label = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var imgurl = markers[i].getAttribute("imgurl");
var color = markers[i].getAttribute("color");
var link = markers[i].getAttribute("link");
var plink = markers[i].getAttribute("plink");
var linktext = markers[i].getAttribute("linktext");
if (color == "kitty1")
var markerimg = '
';
if (color == "kitty")
var markerimg = '
';
if (color == "photo")
var markerimg = '
';
if (color == "note")
var markerimg = '';
if (color == "vw")
var markerimg = '
';
if (color == "home")
var markerimg = '
';
if (color == "drink")
var markerimg = '
';
if (color == "eat")
var markerimg = '
';
if (color == "sleep")
var markerimg = '
';
if (color == "tree")
var markerimg = '
';
if (color == "see")
var markerimg = '
';
if (color == "star")
var markerimg = '
';
if (color == "peep")
var markerimg = '
';
var html = '' + markerimg + '
' + label + '
