Display marker on top of other markers on google map - javascript

I am looking for javascript code that display marker on top of others.
May be there is any method of GMarker that set marker on top (z-index kind of).
For solution, I destroy marker and created again. The solution works before some time (when I tried this solution) but not right now.

There is a parameter zIndexProcess.
var marker = new GMarker( latlng, { zIndexProcess: "your z index for marker" } );
Should work.
Check this link as well.
http://econym.org.uk/gmap/zindex.htm

Related

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)

Set the altitude/ height of a google maps marker

I am working with markers and adding them like this:
markerLatLang = new google.maps.LatLng(35.6412142,139.6988337);
marker = new google.maps.Marker({position: markerLatLang, map: map});
When I go in to street view all the markers are at ground level. Is there a way to position a marker at x meters above ground or at a set altitude?
Unfortunately, as Dr.Molle said, this option doesn't exist in Google Maps API for now.
I have done this using a PNG image having bottom empty space how much you want. I also did not find a proper way to do that but this trick may be helpful to you.

How to identify google maps marker on the map

I have a list of google maps markers as html links next to a google map. I have the function that is triggered when I click on the link. Marker ID is passed to this function.
My question is - when I have 100 markers, I want somehow IDENTIFY the clicked marker on the map. Some sort of ripple effect that would go away from the marker.
please advice what are my possible options so I could develop appropriate solution
Example: 100 markers already on the map. I also have 100 names on the left. Each name corresponds to each marker. When I click the name, I want the marker that belongs to that name somehow "blink" or identify itself in some other way among other markers.
before the markers was pin on the map
you need to set a global markers variable
var gb.markers = [];
while you create each marker need to push into global marker array
marker = new google.maps.Marker({
// other stuff
'id': marker.id
});
after you done with assign function to marker, push it into global var
gb.markers.push(marker);
make sure when you click on marker will get marker id
and loop the global markers or make marker array with id as index
A ripple effect would be quite complicated, possibly involving positioning of a 'GroundOverlay' object centered around the marker you wish to highlight.
If your goal is just to be able to highlight the marker, perhaps playing a simple animation using 'Marker.setAnimation(animationObject)'. You could perhaps using 'Animation.BOUNCE' to highlight the marker?

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
});

Google Map fitBounds makes the map be in the ocean :)

I have this page where I have a listing of items per state. If I try to do
map.fitBounds(bounds);
Then the map suddenly shifts to the ocean. What I wanted it to do was to fit around the area of the markers.
Here is the test page for this:
http://www.comehike.com/outdoors/terrain.php?type=hills&geo=state&state_id=1
Any idea what is going wrong?
Thanks!
When you initialize bounds at the end of initializeTerrain there are no markers on the map. Therefore it defaults to that spot in the Pacific when you later call map.fitBounds(bounds). You need to extend the bounds after each of the markers are added.
var myLatlng = new google.maps.LatLng( 32.533470 , -87.786118 );
bound.extend(myLatlng);
...repeat for each marker.
should do the trick
that location is the center of the map, probably meaning that the location wasn't found. Maybe an incorrect syntax somewhere?

Categories

Resources