bouncing marker, not bouncing after zoom - javascript

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

Related

Google Maps: Clickable Overlay with markers

I want to overlay an SVG on Google Maps, and make certain parts of the SVG clickable.
However, I also want it to be possible to place markers on the same map. These should appear on top of the image, and I want a marker click to take priority over a SVG path click.
I have placed an overlay on a Google Map, exactly as described here: https://codepen.io/Sphinxxxx/pen/wjEyMm
This works exactly how I'd want. However, notice that markers go BELOW the image. And yet, clicking the marker through the image executes the click logic of the marker.
const marker = new window.google.maps.Marker({
map: map,
position: {lat: parseFloat(62.3), lng: parseFloat(-150.22)}
});
marker.addListener("click", () => {
console.log("Oh hi Marker");
map.setZoom(8);
map.setCenter(marker.getPosition());
});
Same example with marker added:
https://codepen.io/maikelraow/pen/gOmdmdM
I have tried changing the SVG's layer from overlayMouseTarget to overlayLayer and while this does put it below the markers, it also prevents any click events from firing on the SVG.

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.

How to get Marker Click event perfect when multiple markers are nearly attached

I am working on google map api.
I have set markers on map using icon path values.
My problem is that , i am not getting perfect marker click.
when i click on red marker it displays another marker info window.
And then click on other marker then it displays another marker info window.
Here is my Example : http://jsfiddle.net/u758rqpa/100/
marker = new google.maps.Marker({
position: new google.maps.LatLng(markerA[i][2], markerA[i][1]),
map: map,
icon: {
path: pathValue,
fillColor: markerA[i][6],
fillOpacity: 1,
strokeWeight: strokeWeight,
scale: scalesize,
anchor: new google.maps.Point(200, 200),
rotation: rotation,
}
});
This is wrong click.
so, please help me to find out perfect marker click.
Or what i have to do to achieve that perfect marker click.
Means when i click on red marker it should display red in infowindow, when click on green it should display green infowindow.
so, please give me any solution to get this.
You need to define the marker shape property.
google.maps.MarkerShape object specification
This object defines the clickable region of a marker image for browsers other than Internet Explorer.
Everything is explained in the documentation here: https://developers.google.com/maps/documentation/javascript/reference#MarkerShape.

Auto center the marker on google maps

I have a marker on google maps on my website. I want the marker to be always at the center of the map whether we zoom in or zoom out.
In the sense, lets say the marker is at boston and the zoom level of map is in such way that we can see the whole Massachusetts state, no matter at which part of the state we zoom into, Boston should be at the center of the map with a newer zoomed level, same thing should happen even when we zoom out.
From the google docs
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
You can also use something like this to center the map on an event map.setCenter(marker.getPosition());

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

Categories

Resources