How to change draggable hand cursor pointer to arrow on Google Maps?

How can I change cursor from arrow to hand?

In this post I will explain how to change draggable cursor pointer on google maps. We can customize the cursors that an embedded Google map uses on your web page. 

By default, the map uses an open-handed cursor when a mouse pointer is over the map and a closed-handed cursor when the viewer of your website is dragging the map. We can replace the hand cursor with a cursor to arrow or any of your choice using .png image/.cur

How can I change cursor from arrow to hand?

map.setOptions({ draggableCursor: 'url(pcursor.png) 16 16, default' });

map.setOptions({ draggableCursor: 'url(images/my-mouse-pointer.cur), default' });

Find the sample application below:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to make a map on google maps in asp.net</title>
    <style type="text/css">
        html, body, #map-canvas
            margin: 0;
            padding: 0;
            height: 550px;
            width: auto;
    <%--Google Maps API--%>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script type="text/javascript">
        var map;                                        // Declaring a global variable
        function initialize() {
          var mapOptions = {
            zoom: 5,                                    // Set Zoom Level
            center: new google.maps.LatLng(24, 75),     // Set the Latitude and longitude of the location
            mapTypeId: google.maps.MapTypeId.ROADMAP    // Set Map Type Here ROADMAP, TERRAIN, SATELLITE
          map = new google.maps.Map(document.getElementById('map-canvas'),      // Creating the map object to desplay
              function ChangeDragabbleCursor()
                map.setOptions({ draggableCursor: 'url(pcursor.png) 16 16, default' });

<body onload="initialize();">
    <form id="form1" runat="server">
    <a href="#" onclick="ChangeDragabbleCursor();">Change Draggable Cursor</a>
    <br />
    <br />
    <div id="map-canvas">
    <br />
    <br />
    Note : It works well with IE-10, Chrome & Mozilla Firefox

How to change draggable hand cursor pointer to arrow on Google Maps? Reviewed by Ravi Kumar on 3:31:00 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form


Email *

Message *

Powered by Blogger.