Saturday 19 April 2014

Multiple polygons on google map with hover show, hide

Here you can find the multiple ploygons on the google map and we can show and hide the ploygons as per the title mouse over, i didt find much time to shorten this jquery code. Meantime i am not ok with the line 


idx=jQuery(this).attr('id');
for(var i=0,l=countries.length;i
if(idx==i){countries[i].setMap(map);}
else{countries[i].setMap(null);}
}


I cant able to directly assign my idx value like this countries[idx].setMap(map);, if i put like then it is showing as countriex[idx] is not a function, if anyone know the solution please let me know




Put your google map script URL
Put your Jquery ajax URL
Set your div tags with ID values


function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);   
var mapOptions = {     zoom: 2,     center: myLatLng,     mapTypeId: google.maps.MapTypeId.TERRAIN   };  
map = new google.maps.Map(document.getElementById("map_canvas"),       mapOptions);
var countries = new Array();

countries[0] = new google.maps.Polygon({
paths: [
new google.maps.LatLng(59.677361, -2.469846),     
new google.maps.LatLng(59.299717,   -6.314917),     
new google.maps.LatLng(57.877247,   -9.314917),     
new google.maps.LatLng(54.428078,  -11.638861),     
new google.maps.LatLng(51.784554,  -11.702241),    
new google.maps.LatLng(50.185848,  -10.054354),     
new google.maps.LatLng(49.405380,   -7.012100),     
new google.maps.LatLng(49.090675,   -3.272664),     
new google.maps.LatLng(48.775970,   -1.709283),     
new google.maps.LatLng(49.757851,   -2.089565),     
new google.maps.LatLng(50.714554,    1.037195),     
new google.maps.LatLng(51.482437,    2.304801),     
new google.maps.LatLng(53.433609,    3.276632),     
new google.maps.LatLng(55.863132,    3.445646)],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});

countries[1] = new google.maps.Polygon({   
paths: [   
new google.maps.LatLng(25.774252, -80.190262),     
new google.maps.LatLng(18.466465, -66.118292),     
new google.maps.LatLng(32.321384, -64.757370),     
new google.maps.LatLng(25.774252, -80.190262)],
strokeColor: "#FF0000",   
strokeOpacity: 0.8,   
strokeWeight: 2,   
fillColor: "#FF0000",   
fillOpacity: 0.3
});


countries[2] = new google.maps.Polygon({   
paths: [   
new google.maps.LatLng(12.774252, -80.190262),     
new google.maps.LatLng(33.466465, -66.118292),     
new google.maps.LatLng(44.321384, -64.757370),     
new google.maps.LatLng(33.774252, -80.190262)],
strokeColor: "#FF0000",   
strokeOpacity: 0.8,   
strokeWeight: 2,   
fillColor: "#FF0000",   
fillOpacity: 0.3
});

countries[3] = new google.maps.Polygon({   
paths: [   
new google.maps.LatLng(33.774252, -44.190262),     
new google.maps.LatLng(55.466465, -54.118292),     
new google.maps.LatLng(75.321384, -64.757370),     
new google.maps.LatLng(53.774252, -80.190262)],
strokeColor: "#FF0000",   
strokeOpacity: 0.8,   
strokeWeight: 2,   
fillColor: "#FF0000",   
fillOpacity: 0.3
});

jQuery('#submenu_links li a').mousemove(function(){
idx=jQuery(this).attr('id');
for(var i=0,l=countries.length;i
if(idx==i){countries[i].setMap(map);}
else{countries[i].setMap(null);}
}
});

jQuery('#submenu_links li a').mouseout(function(){
var id=jQuery(this).attr('id');
for(var i=0,l=countries.length;i
countries[i].setMap(null);
}
});
 
 }
google.maps.event.addDomListener(window, 'load', initialize);