I’m still learning javascript so bear with me but I’m having a problem with and onclick function in GMaps. We’ve got a planning map for customers with a bunch of polygons to demarcate regions. When they click on a polygon I want the map to zoom in on the region but then also remove the polygon so the color/shading doesn’t interfere with their view. I can get either one to happen on it’s own but can’t get both to happen even though I think I have the code in the right order. Any help?
var map;
var src = 'https://www.huts.org/Tests/Maps/GPSTracks/fullHutSystemEdit5.kml';
function initialize() {
var map_canvas = document.getElementById('map-canvas');
var map_options = {
center: new google.maps.LatLng(39.51174, -106.26735),
zoom: 9,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControlOptions:{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControlOptions:{
style: google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(map_canvas, map_options)
loadKmlLayer(src, map);
var poly10th
var polyBraun
var polyGrand
var TenthCoords = [
new google.maps.LatLng(39.731481865131, -106.9903564453125),
new google.maps.LatLng(39.150297710716686, -106.9903564453125),
new google.maps.LatLng(39.15029771071668, -105.91644287109375),
new google.maps.LatLng(39.731481865131, -105.91644287109375),
];
var BraunCoords = [
new google.maps.LatLng(39.150297710716686, -106.9903564453125),
new google.maps.LatLng(38.9348437659246, -106.9903564453125),
new google.maps.LatLng(38.9348437659246, -106.57562255859375),
new google.maps.LatLng(39.150297710716686, -106.57562255859375),
];
var GrandCoords = [
new google.maps.LatLng(40.06651166669527, -105.91644287109375),
new google.maps.LatLng(39.731481865131, -105.91644287109375),
new google.maps.LatLng(39.731481865131, -105.53741455078125),
new google.maps.LatLng(40.06651166669527, -105.53741455078125),
];
var systemCoords = [ TenthCoords, BraunCoords, GrandCoords];
poly10th = new google.maps.Polygon({
name: "10th Mountain Hut System",
paths: systemCoords [0],
strokeColor: '#cccccc',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00CED1',
map:map,
fillOpacity: 0.25
});
polyBraun = new google.maps.Polygon({
name: "Braun & Friends Hut System",
paths: systemCoords [1],
strokeColor: '#cccccc',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00CED1',
map:map,
fillOpacity: 0.25
});
polyGrand = new google.maps.Polygon({
name: "Grand Huts System",
paths: systemCoords [2],
strokeColor: '#cccccc',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00CED1',
map:map,
fillOpacity: 0.25
});
poly10th.setMap(map);
polyBraun.setMap(map);
polyGrand.setMap(map);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h5 id="firstHeading" class="firstHeading">10th Mountain Division Hut System</h5>'+
'</div>';
var contentStringBraun = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h5 id="firstHeading" class="firstHeading">Braun & Friends Hut System</h5>'+
'</div>';
var contentStringGrand = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h5 id="firstHeading" class="firstHeading">Grand Huts Association</h5>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 250
});
var infowindowBraun = new google.maps.InfoWindow({
content: contentStringBraun,
maxWidth: 250
});
var infowindowGrand = new google.maps.InfoWindow({
content: contentStringGrand,
maxWidth: 250
});
google.maps.event.addListener(poly10th, "mouseover", function() {
var laty = 39.44474
var lngy = -106.42499
infowindow.setPosition(new google.maps.LatLng(laty,lngy));
infowindow.open(map);
});
google.maps.event.addListener(polyBraun, "mouseover", function() {
var laty = 39.05705
var lngy = -106.79873
infowindowBraun.setPosition(new google.maps.LatLng(laty,lngy));
infowindowBraun.open(map);
});
google.maps.event.addListener(polyGrand, "mouseover", function() {
var laty = 39.88286
var lngy = -105.75916
infowindowGrand.setPosition(new google.maps.LatLng(laty,lngy));
infowindowGrand.open(map);
});
google.maps.event.addListener(poly10th, 'mouseout', function() {
infowindow.close(map,poly10th);
});
google.maps.event.addListener(poly10th, 'click', function() {
map.setZoom(11);
map.setCenter(poly10th.getPosition());
});
google.maps.event.addListener(poly10th, 'click', function() {
poly10th.setMap(null);
});
google.maps.event.addListener(polyBraun, 'mouseout', function() {
infowindowBraun.close(map,polyBraun);
});
google.maps.event.addListener(polyGrand, 'mouseout', function() {
infowindowGrand.close(map,polyGrand);
});
google.maps.event.addListener(poly10th,"mouseover",function(){
this.setOptions({fillColor: "#00FF00"});
});
google.maps.event.addListener(poly10th,"mouseout",function(){
this.setOptions({fillColor: "#00CED1"});
});
google.maps.event.addListener(polyBraun,"mouseover",function(){
this.setOptions({fillColor: "#00FF00"});
});
google.maps.event.addListener(polyBraun,"mouseout",function(){
this.setOptions({fillColor: "#00CED1"});
});
google.maps.event.addListener(polyGrand,"mouseover",function(){
this.setOptions({fillColor: "#00FF00"});
});
google.maps.event.addListener(polyGrand,"mouseout",function(){
this.setOptions({fillColor: "#00CED1"});
});
};
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: false,
preserveViewport: true,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);