CODEWITHSUNDEEP
google-maps-api-3pan
jdb1a1
jdb1a1

Reputation: 1045

Google maps API v3 - pan tool is hit-or-miss

I'm having a curious problem with Google Maps API v3 that I haven't seen before...

When the user moves the cursor over the map, it will be the pan hand most of the time, but will occasionally switch to the arrow. It most frequently occurs over a specific geographic area on the map (although it has occurred elsewhere). When the user clicks on the map when it's in "arrow" mode, the map tiles appear as if "selected" and turn blue. It only turns un-blue if the user clicks again while the cursor is showing the arrow over the map.

Strangely, this only happens in Firefox, Safari and Chrome. It doesn't happen in IE9 (I haven't checked for IE8).

It also doesn't happen in the standard google maps product, at http://maps.google.com.

My page also includes other html content, specific other divs that I use in association with jQuery, etc. In other words, it isn't just the map. I've also got some custom CSS going, but I wouldn't image that CSS would only make a specific set of map tiles change the arrow to selectable.

Here's the html and Javascript I am using to load the map...pretty typical stuff:

   var myOptions = {
        center: new google.maps.LatLng(38.955, -94.798),
        zoom: 13,
        minZoom:13,
        maxZoom:23,
        scaleControl:true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

does anybody have any thoughts/comments/suggestions?

Thanks!

Edit: here is a screenshot of the blue-behavior I am talking about:

screenshot http://maps.lenexa.com/google_maps_blue.png

Upvotes: 2

Views: 383

Answers (1)

Andrew Leach
Andrew Leach

Reputation: 12973

It's one of your <div>s in the way of the map:

<div style="left: 50%; top: 50%; width: 10%; height: 10%; z-index: 4;" 
  id="activitySpinner"></div>

I'm not entirely sure how that is being positioned where it is (on the map), but the z-index is upsetting things. Anything above 0 puts it above the map and it gets the mouseover.

Upvotes: 3

Related Questions