Dealing with infoWindows
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="results"></div>
<div id="map"></div>
CSS
#map {
width: 450px;
height: 400px;
}
JavaScript
var map;
var infoWindow;
var clickablePolygons = [];
function createPolygon(path, stateName) {
var poly = new google.maps.Polygon({
paths: path,
strokeColor: "#000",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#330000",
fillOpacity: 0.45
});
//add the polygon to the array, to use later if needed.
clickablePolygons.push(poly);
var nombrecito='luis';
//attach a click event, the first argument of the listener is the event
//you can get the position of the mouse cursor where the map was clicked through this.
google.maps.event.addListener(poly, "click", (function (event,nombrecito) {
return function (event,nombrecito){
//call the setContent method and set the content for the info window
infoWindow.setContent("This state is: " + this);
//set the anchor of the info window, in this case I am using the mouse position at
//the time of the click
infoWindow.setPosition(event.latLng);
//open the info window, passing the map in which to attach it to.
infoWindow.open(map);
}
})(event,nombrecito));
//add the polygon to the map
poly.setMap(map);
}
function initialize() {
var myLatLng = new google.maps.LatLng(39.983994270935625, -111.02783203125);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//polygon coords for Utah
var utah = [
new google.maps.LatLng(41.983994270935625, -111.02783203125),
new google.maps.LatLng(42.00032514831621, -114.01611328125),
new google.maps.LatLng(36.96744946416931, -114.01611328125),
new google.maps.LatLng(37.00255267215955, -109.0283203125),
new google.maps.LatLng(40.97989806962013, -109.0283203125),
new google.maps.LatLng(41.0130657870063, -111.02783203125)];
var colorado = [
new google.maps.LatLng(40.96330795307351, -109.05029296875),
new...