Wednesday, September 4, 2013

Google Maps InfoWindow for Markers Vs Polygon Drawings

Marker :

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 
var mapOptions = {
    zoom
: 4,
    center
: myLatlng,
    mapTypeId
: google.maps.MapTypeId.ROADMAP
 
}
 
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var contentString = 'Marker InfoWindow in Google Map';
 
var infowindow = new google.maps.InfoWindow({
      content
: contentString
 
});

 
var marker = new google.maps.Marker({
      position
: myLatlng,
      map
: map,
      title
: 'Uluru (Ayers Rock)'
 
});
  google
.maps.event.addListener(marker, 'click', function() {
    infowindow
.open(map,marker); // This is the Important point
 
});
 

Polygon Drawing:

statePolygon.wPet = "Polygon InfoWindow in Google Map";
statePolygon.infoWindow = new google.maps.InfoWindow();

google.maps.event.addListener(statePolygon,"mouseover",function(event){
    this.setOptions({fillColor: "#00FF00"});
    this.infoWindow.setContent(this.wPet);
    this.infoWindow.open(map);  // This is the Important point
    this.infoWindow.setPosition(event.latLng);
});