Strange Cursor Behavior in Google Maps V3 - javascript

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.

Related

How to control google maps hover area on circles?

Background: I have developed a web application which is based on Google Maps and it allows the user to collect a chain of LatLng positions with mouse clicks. (These positions are stored to the backend and later an app can draw shapes from these coordinates.) Once a click is registered, the program marks it as a colored circle on the map.
Problem: This worked well for months but since yesterday I notice a different behavior in Google maps: When I move the cursor to a new position for an intended next click and the cursor comes close to an already displayed circle, the cursor turns to hover mode (Index finger symbol) and the click cannot be registered. Principally, the phenomena happened in the past as well but with a far different sensitivity. In the past I had to move truly above the existing circle to get into this hover mode but now it happens when the cursor is just near. This gives me the problem that positions (clicks) cannot be registered in the required granularity anymore. For illustration, I add two photos from the screen.
The first case shows the problem. Even though the cursor is not above the existing circles (blue, yellow, red), it is in hover mode (index finger) and a click can not be collected. So no additional circle can be created at the given position.
The second picture shows the condition when the cursor has moved slightly further away from the position above. Now the cursor changed to the normal pointer mode and a click can be made for a new circle:
So it seems that the area around an object (here circle) which controls the cursor mode (hover or not) has increased in the last days by some changes in the Google maps program. In the past I was able to place circles very close to each other since the cursor did not fall into hover mode (index finger).
Question: Is there a way to control (e.g. in the map definition) the size of the hover area around an object? I have searched an entire day for such a parameter or a solution on a problem of that kind but have not found anything. If there is no way to control it, to whom could I address this issue # Google?
JavaScript Code snippets:
A) The map initiation:
var mapProp = {
center: myCenter,
zoom:18,
gestureHandling: 'greedy',
tilt: 0,
draggableCursor: 'default',
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapDiv = document.getElementById("googleMap");
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
B) The circle creation:
var circle = new google.maps.Circle({
strokeColor: circleColor,
strokeWeight: 1,
fillColor: circleColor,
fillOpacity: 1,
map: map,
center: workPosition[1],
radius: 0.5
})
Betofarina's comment above contains the correct answer. Thanks a lot! Adding "v=3" made Google maps to behave as in the past and my problem was solved. Now I can set new circles very narrow again as below (orange)
The relevant line of code is:
<script
src="http://maps.googleapis.com/maps/api/js?v=3">
</script>
Adding ?v=3 to this line did the job.

How to change the cursor when it hover overs a Google maps polyline from being a hand

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

Google Map API - how to change default cursor on marker

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

Google map hide hand icon

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

Google Maps polygon/overlay - deleting

As a follow-on to a previous question... I am having no luck deleteing
an overay that I have drawn on the map, so that I can start over.
My sequence:
1) draw the map
2) the user selects a city
3) I make an ajax call to get the boundary coordinates for
the selected city, and within the ajax success block, I
draw a boundary around that city - to be complete, I draw
a polygon on the map that completely covers the viewport,
except for a "hole" punch in it that exposes the city.
Great, so far
4) The user selects a new city
5) Same ajax call, but it starts with trying to wipe out the
overlay by setting the "map" to null.
That doesn't work. The new city has a border around it, but
the overlay has become darker, and the original "hole" is
still poked through.
I'm using: negativeSpacePolygon.setMap( null );
to try and clear out the overlay. What am I missing?
See the "hide"/"show" buttons on this example from your last question:
http://www.geocodezip.com/v3_polygon_example_complex_hole.html

Categories