We Keep Coding

Setting InfoWindow Postion in Google Maps

I am drawing a set of Polygons on to Google Maps and would like to have an InfoWindow pop up at the center of each when I click on it.
function attach_info_window(polygon, centroid, title){
var info_window = new google.maps.InfoWindow({
content: title,
position: { lat: centroid[0], lng: centroid[1] }
});
google.maps.event.addListener(polygon, 'click', function() {
info_window.open(map, this);
});
}
The problem is, the window shows up in the NW corner every time. The 'position' parameter seems to be ignored completely. I also tried setting the position on click with
event.latLng
But that returns undefined, even though the API docs specify it, so that doesn't work either. Curiously, it works just fine if I use a Marker instead of the Polygons.

I solved this by removing the second argument in open()
info_window.open(map)
works great. I was passing "this" in order to bind it to that specific polygon among many. I still don't understand why this works, and neither
info_window.open(map, poly)
nor
info_window.open(map, this)
works

This:
info_window.open(map, this);
Will not work for anything but a google.maps.Marker. The second argument of InfoWindow.open can only be a google.maps.Marker, a Polygon or Polyline won't work there.
from the documentation
"In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property"

Animate a particular marker

I insert markers from an array by using a loop and I also include button which zooms to a particular marker. So far so good.
JSFiddle
Now I'd like to animate the marker which I zoom to for 3 seconds. I know I should use the function
marker.setAnimation(google.maps.Animation.BOUNCE);
but I can't figure out how to bind the action to a particular marker. Any help appreciated.

You should keep a reference to the marker objects you create.
var marker_refs = [];
function initialize() {
...
for(...) {
marker_refs[i] = new google.maps.Marker(...);
...
}
I updated your fiddle: http://jsfiddle.net/na9Ha/2/

Google map overlapping of markers in the same locations and not visible to user

I have trouble with my google map script where the markers on a same location overlapped and not visible to user. I tried to edit my script using OverlappingMarkerSpiderfier available in this link https://github.com/jawj/OverlappingMarkerSpiderfier. But overlapping issue exist.No improvement occured.
The below function binds a popup window with marker.I have edited the function to remove overlapping of markers in the same location using OverlappingMarkerSpiderfier.
function bindInfoWindow(marker, map, infoWindow, contentString)
{
var oms = new OverlappingMarkerSpiderfier(map);
oms.addMarker(marker);
oms.addListener(marker, 'mouseover', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
$("#tabs").tabs();
});
}
// highlighting a marker
Below is the jsfiddle link of my edited google map.Please show me where iam doing wrong.
http://jsfiddle.net/7AKuX/11/

You create a new oms-instance for each marker, use the same instance for all markers instead:
http://jsfiddle.net/5VFeJ/

Google map developer api provide clustering method to see overlapped markers and its contents. Refer to this link, or else use OverlappingMarkerSpiderfier.

Marker Clusterer Plus change icon on hover

How can I dynamically change the Icon used for a specific Cluster in Marker Clusterer Plus for Google Maps V3?
The markers do not seem to expose any methods at all to modify them. I need to do something like this (or equivalent).
google.maps.event.addListener(markerCluster, "mouseover", function (cluster) {
cluster.setIcon(hoverIcon);
});
google.maps.event.addListener(markerCluster, "mouseout", function (cluster) {
cluster.setIcon(normalIcon);
});

There is a reference to the div-element that represents the cluster. The first child of this div is the img-element, change the src of this image:
google.maps.event.addListener(markerCluster,'mouseover',function(c){
c.clusterIcon_.div_.firstChild.src='hoverIconPath'});
google.maps.event.addListener(markerCluster,'mouseout',function(c){
c.clusterIcon_.div_.firstChild.src='normalIconPath'});

There is some changing in last google maps.
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
cluster.clusterIcon_.div_.style.backgroundImage = 'url("linktoyourimage")'})
Image icon moved to background.

for me the following path worked:
cluster.clusterIcon.div.firstChild.src

How do I link Google Maps Markers to other elements?

Using the google maps (and JavaScript) I have been able to easily display several markers which each have a nice little info window over them.
//Create map over USA
map = new google.maps.Map2( document.getElementById('map') );
map.setCenter(new GLatLng(38.95940879245423, -100.283203125), 3);
//Create point, then marker, and then add to map
function create_marker(lat, lng, html) {
var marker = new GMarker( new GLatLng(lat,lng));
marker.bindInfoWindow(html);
map.addOverlay(marker);
}
var html = '<div>this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html);
However, I now want to be able to link the "click" of markers to functions which can update other parts of the page as well. For example, I would like to have a sidebar with copies of the marker infowindow content. The same way google maps shows results on the left and markers on the right. I might even want the click of sidebar content to open a given marker infowindow on the map.
The problem is that the GMarker click event only passes the lat/long - and I'm not sure how I can use that to find the matching div or whatever.
How do I get a unique id/handle for each marker?

Assign an id to each marker and its corresponding element in the sidebar. Create an event listener to call that id. Something like this:
var html = '<div>this is my text</div>';
var sideHtml = '<div id="1">this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html, 1);
$("#sidebar").append(sideHtml); // Add the text to the sidebar (jQuery)
//Create point, then marker, and then add to map
function create_marker(lat, lng, html, id) {
var marker = new GMarker( new GLatLng(lat,lng));
marker.bindInfoWindow(html);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function(latlng) {
var div = document.getElementById(id); //access the sidebar element
// etc...
});
}
See also this question.

For those interested there is a great example of linking dom elements with markers given here. Basically you just create a global JS array that holds a reference to each marker object.