CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
ficuscr
ficuscr

Reputation: 7063

How to Change the Mouse Cursor / Pointer when Google Maps API v3 Info Window is Loading

Recently on a project I was displaying an Info Window on the click of a map marker where the content was loaded with an XHR request. There was a noticeable delay from the time of the click event to when the AJAX callback triggered the opening of the Info Window and I wanted to change the mouse cursor to a 'wait' icon so the user knew their click had triggered something.

I first tried setting a cursor style on body, html but found the styles used by the map superseded this.

So, how to set a wait cursor regardless of the mouse pointer being positioned over the marker, map, or elsewhere on the page?

This is the first time I've posted a question I have an answer ready for. I found some posts talking about setting either a map cursor or a marker cursor buy nothing concisely explaining how to accomplish what I am asking here. Hope this saves someone a little time.

Upvotes: 0

Views: 4552

Answers (1)

ficuscr
ficuscr

Reputation: 7063

I ended up with the following code to accomplish this:

/**
* Event handler for marker click event
*/
function markerClickHandler(marker, event) {

    $('html, body').css("cursor", "wait");
    auctionMap.setOptions({draggableCursor: 'wait'});
    marker.setCursor('wait');

    $.ajax({
        type: 'GET',
        url: '/get-marker-info/' + marker.some_id,
        dataType: 'html',
    }).done(function(response) {
        infoWindow.setContent(response);
        infoWindow.open(map, marker);
    }).fail(function() {
        alert('An unknown error occurred.');
    }).always(function() {
        $('html, body').css("cursor", "auto");
        auctionMap.setOptions({draggableCursor: null});
        marker.setCursor(null);
    });
}

This gets a wait cursor to display when the mouse is anywhere on the page, in or out of the map, and while over the marker.

The draggableCursor by default uses an image of an open hand (http://maps.gstatic.com/mapfiles/openhand_8_8.cur), not a standard CSS cursor property value. This is why we use null when reverting the cursor after the call is completed, rather than say using the cursor auto.

It works well enough though is a little wonky in its interactions with mouse movement to trigger the transition. Curious if anyone could improve the code in that regard.

See an example: http://jsfiddle.net/0ere5tju/

Upvotes: 1

Related Questions