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

Question

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!

Answer 1

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.

Answer 2

This is not mentioned in the api, so if you are trying to get the click events on map markers to work on mobile devices, just make sure you bind to the mousedown event and not the click event.

google.maps.event.addListener(marker, 'mousedown', function);

Answer 3

Because MarkerImage( paren doesn't close anywhere, is that what breaks it.

Answer 4

Neither click/mousedown or scale with int solved the bug for me.

After debugging with chrome remote inspector, I found that a div->frame with opacity:0 was lying above (explicit z-index:2) the clickable markers.

I don't know what this frame is for.

You can remove this frame by removing "signed_in" from the script tag:

-    <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=googlemapsloaded"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=googlemapsloaded"></script>