infoWindow position and click/unclick controls - controlling KML groundoverlays

Posted by wendysmith on Stack Overflow See other posts from Stack Overflow or by wendysmith
Published on 2012-06-10T15:44:14Z Indexed on 2012/06/10 16:40 UTC
Read the original article Hit count: 273

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about google-maps