CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps
Parag Bhayani
Parag Bhayani

Reputation: 3330

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

Upvotes: 1

Views: 3566

Answers (3)

Parag Bhayani
Parag Bhayani

Reputation: 3330

This CSS has solved my problem...

#map div {
 cursor:default !important;  
}

Upvotes: 5

Ali Abdulla
Ali Abdulla

Reputation: 346

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

Upvotes: 1

cybermike
cybermike

Reputation: 1147

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.

Upvotes: 1

Related Questions