I've made a lot of progress on this project (with earlier help with forum member Eric Badger, thanks!!) but I now need help with fine-tuning the infoWindow.
Presently, you checkbox one of the historic maps choices -- the map appears as a ground overlay, and if you click it, you get info about the map which appears in a div (yellow area at the bottom).
I want the info to appear in a more traditional window on the map, just to the center-right of the overlay map. It should have a close-option (X at the top corner?)
Also, if you uncheck one of the boxes -- the overlay map disappears but the info window should close as well.
As you see my javascript skills are very limited. I would very much appreciate your help with this.
Here's the test webpage:
Here's the script:
function showphilpottsmap(philpottsmapcheck) {
if (philpottsmapcheck.checked == true) {
philpottsmap.setMap(map);
} else {
philpottsmap.setMap(null);
}
}
function showbrownemap(brownemapcheck) {
if (brownemapcheck.checked == true) {
brownemap.setMap(map);
} else {
brownemap.setMap(null);
}
}
function showchewettmap(chewettmapcheck) {
if (chewettmapcheck.checked == true) {
chewettmap.setMap(map);
} else {
chewettmap.setMap(null);
}
}
function showjamescanemap(jamescanemapcheck) {
if (jamescanemapcheck.checked == true) {
jamescanemap.setMap(map);
} else {
jamescanemap.setMap(null);
}
}
var infoWindow = new google.maps.InfoWindow();
function openIW(FTevent) {
infoWindow.setContent(FTevent.infoWindowHtml);
infoWindow.setPosition(FTevent.latLng);
infoWindow.setOptions({
content: FTevent.infoWindowHtml,
position: FTevent.latLng,
pixelOffset: FTevent.pixelOffset
});
infoWindow.open(map);
}
var philpottsmap;
var brownemap;
var chewettmap;
var jamescanemap;
function initialize() {
var mylatlng = new google.maps.LatLng(43.65241745, -79.393923);
var myOptions = {
zoom: 11,
center: mylatlng,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//End map parameters
brownemap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1851map_jdbrowne.kml',
{preserveViewport:true, suppressInfoWindows:true});
google.maps.event.addListener(brownemap, 'click', function(kmlEvent) {
document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
});
chewettmap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1802mapwilliamchewett.kml', {preserveViewport:true, suppressInfoWindows:true});
google.maps.event.addListener(chewettmap, 'click', function(kmlEvent) {
document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
});
philpottsmap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1818map_phillpotts.kml', {preserveViewport:true, suppressInfoWindows:true});
google.maps.event.addListener(philpottsmap, 'click', function(kmlEvent) {
document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
});
jamescanemap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1842jamescanemapd.kml', {preserveViewport:true, suppressInfoWindows:true});
google.maps.event.addListener(jamescanemap, 'click', function(kmlEvent) {
document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
});
}
Thanks very much!
Wendy
