I am using google maps api V3, I am currently showing custom markers as dots of 6x6px and whenmousehover them I am showing infowindow.
I have set cursor to default on the map and on the markers aswell, now when I mousehover on the marker and then I move mouse towards infowindow for a fraction of second it shows hand cursor, which looks quite ugly when I have quite a few markers on the map, I need to avoid this, please let me know how I can avoid this.
Here is my jsfiddle Here hover on bluedots which are markers from bottom to top and you will see little flicker, I don't want to show handicons at all ... I just want default cursors
This is how I have create infowindow
var infowindow = new google.maps.InfoWindow({
content: "infowindow",
cursor: 'default',
});
This CSS has solved my problem...
#map div {
cursor:default !important;
}
I believe this may be a "bug"/"characteristic" of Google Maps API. What is happening is that when moving the cursor upward vertically, it moves off the Marker and onto the transparent bounding box of the InfoBox. However, your MouseOut handler for the Market then removes the InfoBox off of the map.
So the Google Maps API has to then decide what to do when the cursor is over an element that is removed. It SHOULD pick the cursor that you defined as the default in the MapOptions; but it does not. I used both FireFox's and Chrome's Element Inspectors, and saw repeatedly that when the InfoBox got removed, Google Maps API explicitly set the active cursor to the "Hand" instead of leaving it as the "default" in a primary child 'div' of the map.
I added a document.body.style.cursor definition to your initialization code in the JSFiddle just to make sure the Browser itself was not confused about the cursor:
$(document).ready(function () {
mapObjects.domReady = true;
document.body.style.cursor = "default";
});
Even with that added, using the Element Inspector say in Chrome, you will see that the 'div' immediately below the 'div class="gm-style" ...' gets its cursor style explicitly changed to a 'url' of the hand when the InfoBox gets removed. Move the cursor just one pixel more, and the cursor style of that 'div' gets reset back to "default" by the Google Maps API.
So the problem is not with Browser inheritance of the cursor style. The Google Maps API is itself overriding the cursor style for that child 'div', and all its child 'divs', of which the map images are a part (and which the cursor is resting over when the InfoBox gets removed).
You should of-course file a bug report with Google. Maybe they'll fix this in V4 of the Google Maps API.
One possible work-around:
You might try re-positioning the InfoBoxs so they are three, five, or more pixels away from the Marker, and off-center say to the right or left of the Marker. Then when the cursor moves off the Marker (and triggers the MouseOut and the InfoBox removal) its not on top of the hidden portion of the InfoBox, but rather over a Map image tile. Thus it will behave just like moving off the Marker to the right, left, or bottom does now, and won't get overriden by the InfoBox removal. However, if the end-user is moving the cursor fast, or in the direction of the now off-center InfoBox, you'll still get the hand cursor appearing.
Another not really recommended possible work-around:
a. Do the first recommendation (the gap between Marker and InfoBox).
b. Get a handle to that particular 'div' by stepping through the immediate children of the "gm-style" div.
c. In the MouseOut handler, use a SetTimeout with a very short millisecond interval to re-override that 'div's' cursor style back to "default".
This would get rid of the hand cursor even during a fast cursor move over the off-center InfoBox. You'll still get a slight flicker, but it won't stay a hand cursor that way if the end-user stops moving the cursor. But that is monkeying deep into Google's map 'div' structure, and this work-around is not going to be reliable long-term.
Your solution is correct and the issue is with the marker icon being an image. Try changing that using google.maps.symbols
I have created a custom SVG path for your marker on your fiddle and it worked but the infoWindow is still flickering though.
Here is the icon symbol object
icon: {
path: 'M0,0 10,0 10,10 0,10 Z',
scale: 1,
fillColor: '#076EB5',
strokeColor: '#076EB5',
fillOpacity: 1,
}
Nice documentation on the symbols here
Related
When you hover over a polyline in Google Maps (Chrome) the cursor changes to a hand. This is undesirable for me as it's causing flickering between the default map cursor and the hand cursor (the polyline moves as the mouse moves).
I tried this:
google.maps.event.addListener(temp_polyline, 'mouseover', function(e) {
map.setOptions({draggableCursor:'crosshair'});
map.setOptions({draggingCursor:'crosshair'});
});
But the crosshair cursor is still only visible when the cursor is not hovering over a polyline
Set the "clickable" option of the polyline to false, then it shows only the crosshair cursor which is set in the code of my question and no longer shows the "hand". The hand only appears to show that the polyline is clickable.
Please change the code to the following and let me know how it works:
google.maps.event.addListener(map, 'mousemove', function(e) {
map.setOptions({draggableCursor:'crosshair'});
});
EDIT:
Look at this answer to use a combination of CSS and JS to change the default cursor
I worked out this to be doing the job:
map.addListener("mousemove", (mapsMouseEvent) => {
map.setOptions({draggableCursor:'crosshair'});
});
I would like to know how to change default cursor when user move it on marker or map.circle.
On google developers page I found how to change draggableCursor or draggingCursor but there is nothing about clickable cursor.
Default on marker, cursor change to "cursor: pointer", I would like to keep cursor as a "openhand" and keep marker "clickable".
Thank you
The API explicitly provides a function to set the cursor:
marker.setCursor('default');
Edit: This does not provide the openhand cursor, which is actually an image. I couldn't find anything to use a custom image as a cursor for a marker.
But if you provide a random value to the setCursor function, the cursor reverts back to the default openhand image.
marker.setCursor('xyz');
I am trying to change my cursor in google maps to the "wait" cursor while I request information from remote servers. This is weather information from international servers and it can sometimes take a long time to return, so I want the user to know that something is going on.
A user clicks on either a marker or a bounding box and then I make the following call to get the data:
map.setOptions({draggableCursor: "wait"});
$.ajax({
type:"GET",
dateType:"html",
url:url,
cache:false,
success:function(response){openInfoWindow(response, 1);},
error:function()
{
map.setOptions({draggableCursor: null});
displayMessage("badGet",0);
}
});;
function openInfoWindow(request, ignoreStatus)
{
map.setOptions({draggableCursor: null});
infoWindow = new InfoBox({maxWidth: 0, position: center, disableAutoPan: true});
}
The first thing that I do in openInfoWindow is map.setOptions({draggableCursor: null}), so the cursor should go back to a normal cursor. After that I open an infoWindow with the results.
Here's what I find to be very strange:
1) If I leave the cursor over the marker or within the bounding box, it never switches to the wait cursor. If I move it off of the marker or outside of the bounding box, it functions as expected.
2) If the cursor is positioned over the location where the infoWindow appears, the cursor switches to the wait cursor, but doesn't switch back to the normal cursor until I move the cursor outside of the infoWindow.
3) When the cursor is not over the clicked object or the location of the infoWindow, it doesn't change from "wait" to normal until the cursor is moved.
I suspect that there's something basic that I'm missing with regards to how/when the cursor gets updated. Any enlightenment would be appreciated.
Note that you can see this behavior at http://www.geoffschultz.org/weather_map_2.php by selecting Weather Charts/BBC In-shore Forecast and lots of other places.
-- Geoff
I also had to drag or click to get the cursor to change back after
map.setOptions({draggableCursor: null});
Using this instead worked for me as soon as I move the mouse
map.setOptions({draggableCursor: ''});
For question 1, you'll need to set the Marker cursor separately from the Map cursor.
Marker.setCursor("wait");
Not sure about the problems with the InfoWindow.
I really want to know if there's a way to make the InfoWindow display on the center of the screen and not above the marker.
Also, how can I get rid of that predefined crappy speech bubble style of the window itself?
When the marker gets clicked, the InfoWindow shall be displayed in the center of the screen with a width of 720px, a black opaque background and a little content (no speech bubble, no pan, just pure css). I cant find anything coming close to what I need.
I included the infobox.js to try to get what I want, but I got 2 problems with this:
It doesn't take my position: absolute and the given top/left values.
After closing the InfoBox once, it won't open again.
Some code that could be relevant:
// creating the box
var ib'.$counter.' = new InfoBox(myOptions);
// box options - just the style part
var myOptions = { boxStyle: { ,width: "720px" ,position:"absolute" ,top:
"-100px" ,left: "100" } };
// add listener - plane js
google.maps.event.addListener(marker'.$counter.', "click",
function() { ib'.$counter.'.show() });
I would really appreciate any kind of help!
Best regards,
Rellston.
I have a very busy Google Maps app that I have built and I'm trying to create a "buffer zone" around the outside edge of the map so that the google map commands won't put things there. My solution was to create invisible divs and add them to the map as controls, one for each of the edges. This seems to work great as all of the google commands see them and adjust accordingly, and the map appears normally. For example, fitBounds ensures my bounds is not under the invisible layers. For the top where I have a control bar it's a perfect solution, but for the other edges where there is nothing, it creates a problem - I can't click on the map or info windows under these controls as they take the click event.
So I'm looking for one of 2 solutions:
1) can I make my invisible controls pass clicks through to the map, or;
2) is there a better way to pad the edge of the map; something that doesn't involve a much of math every time I want to call a fitBounds or panTo would be preferred as I automate a lot of map motion
Cheers
I managed to solve this.
The best way to add padding to your maps is with invisible controls. It creates the padding that all other map functions obey without any additional coding when call them. Here is how to do it for everyone else who needs this.
First.. I create a function to simplify creating the divs.
function createDummyDiv(w, h){
var out = $(document.createElement('div')).addClass('dummy-div').css('width', w).css('height', h);
return out[0];
}
Then I add the controls as needed. In this case I have the normal zoom control in the LEFT_CENTER position, so I had to create 2 for the left side. This creates a 10% padding on the left, right and bottom, and a 55px padding at the top under my own control bar.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(createDummyDiv('100%', '55px'));
map.controls[google.maps.ControlPosition.LEFT_TOP].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(createDummyDiv('10%', '100%'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(createDummyDiv('100%', '10%'));
The.. the final fix to my problem is to put them behind the map layer with css.
.dummy-div{ z-index: -100 !important; }
I hope this helps someone else
Try to give the invisible DIV a negative z-index, e.g. -10
For me, fitBounds api worked itself with second parameter (padding)
Add padding to google map bounds