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
map.setOptions({ draggableCursor: 'url(pcursor.png) 16 16, default' });
map.setOptions({ draggableCursor: 'url(images/my-mouse-pointer.cur), default' });
Find the sample application below:
Default.aspx
<%@ 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;
}
</style>
<%--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
mapOptions);
}
function
ChangeDragabbleCursor()
{
map.setOptions({
draggableCursor: 'url(pcursor.png) 16 16, default'
});
}
</script>
</head>
<body onload="initialize();">
<form id="form1" runat="server">
<a href="#" onclick="ChangeDragabbleCursor();">Change
Draggable Cursor</a>
<br />
<br />
<div id="map-canvas">
</div>
<br />
<br />
Note : It works well with IE-10, Chrome
& Mozilla Firefox
</form>
</body>
</html>
How to change draggable hand cursor pointer to arrow on Google Maps?
Reviewed by Ravi Kumar
on
3:31 PM
Rating:
Reviewed by Ravi Kumar
on
3:31 PM
Rating:
No comments: