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.
Related
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.
i have kept the marker image draggable it disappears after a particular position. I have attached a screenshot to represent the problem.
markerImage = new google.maps.MarkerImage('../img/marker.png', null, null,null,new google.maps.Size(14, 14));
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[idx][2],locations[idx][3]),
icon : markerImage,
draggable : isDraggable,
map : panorama
});
Please don't say google maps size is causing the problem. I have checked it is not causing the problem.
Problem Image
You should provide the code of your listeners to allow move the marker, I also assume isDraggable is true sometimes:
// listener for the MAP that moves marker on click
google.maps.event.addListener(panorama, 'click', function(event) {
marker.setPosition(event.latLng);
});
CHECK THIS WORKING FIDDLE and THIS ANSWER
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)
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
});
I really like how Trulia.com has created their custom Google Map InfoWindows.
What I like in particular about Trulia's implementation of the InfoWindow is:
Extends beyond the map border: Google Maps InfoWindows are contained within the map border whereas Trulia's seems to be able to float on-top of the map
Always displays InfoWindow near map Center: Google Maps InfoWindows always display the InfoWindow above the marker whereas Trulia InfoWindows always display the InfoWindow as close the center of the map as possible. For example, if the map marker icon is on the top of the map near the border, the Trulia InfoWindow is displayed below the map marker icon
InfoWindow is displayed on mouse hover (not 'click'): With the default Google Maps InfoWindow, you have to 'click' the map marker icon to display the InfoWindow whereas Trulia InfoWindows are display simply by hovering over the map marker icon.
I found the PdMarker, which is a 3rd party extension for Google Map InfoWindows that accomplishes most of the above bullets but not all. 1) It does not extend beyond the map border, 2) it does not work with Google Maps API version 3 (only version 2).
Anyone know how Trulia is accomplishing their InfoWindow-like implementation on Google Maps API v3?
That's an interesting question. I've been playing with maps recently too. I'm far from expert but I can tell you what I know.
I think the site you mentioned uses a custom div overlay rather than google's info window.
1. InfoWindow is displayed on mouse hover (not 'click')
This can be done with event listeners. For example in maps API v3:
google.maps.event.addListener(marker, 'mouseover', function() {
// myDiv.style.visibility = 'visible'
});
google.maps.event.addListener(marker, 'mouseout', function() {
// myDiv.style.visibility = 'hidden'
});
Here's is a pretty good example of how this can be done.
2. Extends beyond the map border
3. Always displays InfoWindow near map Center
Both of these can be achieved using CSS: (2) using z-index and (3) with position.
There is a similar example of using custom marker tooltips which you can find here. It also shows how you can utilize mouseovers to pop-up tooltips by hovering other elements on your page.
myElement.onmouseover = function(){
google.maps.event.trigger(marker, 'mouseover');
}
myElement.onmouseout = function(){
google.maps.event.trigger(marker, 'mouseout');
}
Finally, another site that makes a good use of maps, although this one uses V2 of the API. Hope this helps.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
is an extension to google maps which allows you to create custom infowindows