Google Maps API v3: custom markers not clickable on mobile devices

We have a site that uses Google Maps API v3 to display a bunch of markers on the map. The markers are clickable, and open a standard Google Maps info popup.

This works great on all desktop browsers. But for some reason, I can't make it work on any mobile device that I've tested (a variety of Android and iOS devices). The markers simply don't respond to clicks.

I've narrowed it down to our custom markers. If I remove the code that loads our custom marker images using new google.maps.MarkerImage(), then it works fine.

var marker = new google.maps.Marker(
    var markerOptions = {
        icon : new google.maps.MarkerImage(
            mURL, new google.maps.Size(mWidth,mHeight),
            new google.maps.Point(0,0),new google.maps.Point(anchorX,anchorY)
        ),
        flat: true,
        position: point,
        visible: true,
        title: title,
        zIndex: zIndex,
        map: map,
    }
);

google.maps.event.addListener(marker,'click',function() { ...... });

The above code works fine on all desktop browsers, but fails in all mobile browsers. However, if I remove the custom graphic (ie the 'icon' property), it works fine.

Any ideas? I'm pulling my hair out!

Answers


Found it!

The root cause of the problem was that our code was providing the marker size and anchor properties as strings, whereas the Maps API expects them to be integers. The values are being loaded from a database and provided to Javascript from a PHP program. The fix was therefore to cast the PHP values to (int) when creating the array that is output as JSON.

This was a very subtle problem to find: on desktop browsers the Maps API seems to cope just fine with these arguments being provided as strings. It's only on mobile browsers that it fails.

This inconsistency in the Maps API meant that it escaped our initial sanity checks when the code was written, and made it very difficult to debug once the issue had been found.

So despite the root cause being us providing the wrong data type, I would consider inconsistencies like this to be bugs in the API.


Need Your Help

SherlockFragmentActivity setSupportProgressBarIndeterminateVisibility does not work

android actionbarsherlock

i am trying to display the indeterminate progress bar in the SherlockFragmentActivity

Combine these two mySQL queries

mysql sql subquery group-concat

This query produces the right answer:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.