Develop Reference

Google map infowindow position on custom marker

I'm not using the Markers in Google Maps because I wish to render custom text and images on my marker, so what I did is a custom marker using Overlays.
The Overlay position is not exactly like the marker so I played a bit with it and now it is rendering exactly like a marker.
The problem now is the infowindow because it doesn't open on top of the overlay but exactly on the position of the overlay, I wish it to be on top of it, around 32px less on the top position.
Looking at the documentation it looks like the infowindow position is related to the object and on the LatLng, so how can I move it?
Here is the code I'm using:
var marker;
marker = new CustomMarker(markerPosition, map, {}); // custom marker is a class I wrote to prototype the overlay.
google.maps.event.addListener(marker, 'click', function() {
myInfowindow.open(map, marker);
});
Quite simple but unfortunately the infowindow is over the marker and not on top of it like if I use a marker.

Set the pixelOffset of the InfoWindow appropriately:
From the documentation on InfoWindows
pixelOffset | Type:Size | The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened with an anchor, the pixelOffset will be calculated from the anchor's anchorPoint property.

Marker over Infobubble in google maps v3

I'm trying to put a google.maps.Marker object over (z-index positioning) an Infobubble object
but i am having no success.
Basically what i'm doing is assigning zIndex: n to the markerOptions object which I pass to the Marker constructor as follow:
var markerOptions = {
position: store.getLocation(),
title: store.getDetails().title,
icon: DEFAULT_MARKER,
anchorPoint: new google.maps.Point(20,5),
zIndex: 2
};
var marker = new google.maps.Marker(markerOptions);
I have already read this answer Google Maps v3 marker over infowindow but actually it has not got any votes. Can somebody tell me more about?
Thanks a lot

The problem, as commented by shaunhusain is the fixed pane where particular elements will be drawn.
It's correct that you need to use a custom overlay, but you must use it to draw the marker, not the infobubble.
The reason: infobubble is an implementation of a custom overlay, it will be drawn inside the floatPane. To put the marker on top the infobubble must be drawn into a pane with a zIndex equal or lower than the zIndex of the pane where the marker will be drawn.
But here comes the problem: all these panes do not receive mouse-events, you wouldn't be able to interact with the infobubble(select tabs, select text, click links, close the infobubble).
Therefore you must use a custom overlay to draw the markers, and you must put these overlays into the floatPane(it's the pane with the highest zIndex)

bouncing marker, not bouncing after zoom

this issue I had with google maps, I made a fiddle here.
marker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.BOUNCE,
title:"Hello World!"
}),
if I drag the map where I can no longer see the marker, and zoom-in (usually 3 or 4 levels), after I zoom-out where I'm able to see my marker, It's not bouncing anymore, if I click on it, it will bounce again.
is this a browser issue, what am I facing here?

I think this is the default behavior of Google Marker animation. Since you left the map extent there's no need to continue the animation behind the scenes.
If you really want to have your marker bouncing whenever you see it you can add the 'bounds_changed' map event. Every time you zoom or drag the map it should check if your marker is within the visible map area and if so, refresh the bounce behavior:
google.maps.event.addListener(map, 'bounds_changed', function(event) {
if(map.getBounds().contains(marker.position)){
marker.setAnimation(google.maps.Animation.BOUNCE);
};
});

How to animate Custom Marker on Polyline instead of icon in Google Maps API V3?

I'm making a Map where my custom created marker will animate on Polyline from initial point to last point. Currently its working fine with "google.maps.SymbolPath.CIRCLE" icon. But i want to use my custom marker instead of this "google.maps.SymbolPath.CIRCLE" icon. Can someone help to do this.
it will be great if someone help me in short time. Thanks in Advance.

For adding custom icon you have to set icon value in your marker object.
Following is sample how to add custom icon
var marker = new google.maps.Marker({
position: map.getCenter(),
icon:'https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/location-alt-512.png',
draggable: true,
map: map
});
In icon youe have to give path of your custom icon.
Demo for this available here
If you want to add animation on icon on click event than first add click listener
google.maps.event.addListener(marker, 'click', toggleBounce);
and in that function do something like that
if (this.getAnimation() != null) {
this.setAnimation(null);
} else {
this.setAnimation(google.maps.Animation.BOUNCE);
}
New demo here

Place the Google Maps pegman underneath markers

I have a Google V3 map which uses steetView and some map markers.
The little yellow streetView pegman sits on the map on top of the markers.
Is there a way to change the z-indexes so that my markers will be above the pegman
(so that they can be easlly clicked on without having to zoom in)?
In case anything is not clear, here is a fiddle....
http://jsfiddle.net/spiderplant0/BRkCA/
After a bit of experimenting I came up with this...
$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
$($("#map_canvas img[src*=cb_scout]")[1]).parent("div").parent("div").css({'zIndex': -200});
This forces the pegman to sit beneath the markers but now the pegman is no longer dragable and each time the map is moved etc, the pegman jumps above the markers again.

To keep the pegman under your markers you can watch for the pov_changed event and reset the z-index after a short delay
$google.maps.event.addListener(panorama, 'pov_changed', function() {
var func=function(){
$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
}
setTimeout(func,1000);
}
});
You will also need to change the depth of the pegman after the maps moves, which can be accomplished with the following snippet
google.maps.event.addListener(map, 'idle', function() {
google.maps.event.trigger(panorama, 'pov_changed');
})
If you want to be able to drag the pegman, you must first place it above the markers by having a toggle button swap the pegman's depth and add an exception to the pov_changed event handler preventing the pagman from dropping depths when the toggle button is active.

Okay, this may be a bit hacky... (and I hope I understood what you were doing)
1) Disable street view control
2) Make another control with a lower zIndex than the marker you have.
3) Update street view control with the position of the fake street view marker.
http://jsfiddle.net/z7Lp8/

You can set the zIndex of the marker above google.maps.Marker.MAX_ZINDEX in order for the pegman to remain under the marker. MAX_ZINDEX is the maximum default z-index that the API will assign to a marker. Marker z-indexes only work when optimizations are turned off on all markers on the map.
Forked fiddle from question to illustrate: http://jsfiddle.net/brendaz/t4v8nhoq/
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(54.975, -2.020),
map: map,
zIndex: google.maps.Marker.MAX_ZINDEX + 1,
optimized: false
});