Question

I’m working with a google map api. This map was originally on the page with a marker. When the user clicked, the marker opened up with some details. Additionally, the user had the large map controls to zoom, etc. Lastly, the user could drag the maps viewable area.

What we’re trying turn it into is a map that:
1) Has the marker place on the map, but it’s no longer clickable.
2) Clicking on the map is now a hyperlink to a different map page.

Everything works, EXCEPT: when you mouse-over the map, the cursor looks like you should drag the map, not the finger you get when you mouse-over a link. If you mouse-over, you can still drag the map; however, as soon as you let go of the mouse, the link activates and you go to the new page.

How would I take this drag feature off and make the cursor look like a pointer?

Here’s my code:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=MY KEY IS HERE"
      type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function load() {
      if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById("map"));    
//      map.addControl(new GLargeMapControl());
        //code to setup the map START
        //creating Geocoder object to get geolocation from an address
            geocoder.getLatLng("123 Main St, Boston, MA",
                function (point)
                {
                    map.setCenter(point,15);
                    map.addOverlay(createMarker(point,1));
                });         
        //code to setup the map STOP

        // Creates a marker at the given point with the given number label
function createMarker(point, number) {
  var marker = new GMarker(point);
  return marker;
}

      }
    }
//-->
</script>

And where I call the map in the html:

<a href="http://www.mysite.com">
    <div id="map" style="width: 298px;height:150px;"></div>
</a>

Thanks in advance as always.

Answer 1

With version 3 of the maps API, you can disable dragging on the map by passing in a map options object that has draggable: false in it.

Here’s how you’d do it with the version 3 API:

var mapOptions = {
    // add other options here as needed
    draggable: false
}

var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

If you still want to do it with the soon to be deprecated version 2 API, this reference has some information on it. I’m not familiar with the version 2 API, but it looks like you just do this:

var map = new GMap2(document.getElementById("map"));
map.disableDragging(); 

To change the cursors that are used, have a look at the GMapOptions class. You pass these options into the GMap2 constructor above.