2

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!

SDC
  • 14,192
  • 2
  • 35
  • 48
  • It's possible you have found a feature, or even a bug. Have you tried removing the size (even temporarily as a test) to see if unsized markers work ok? Or the other attributes? Custom markers *are* handled differently. – Andrew Leach Apr 10 '12 at 17:18
  • @AndrewLeach - I've found it. I'll post it as an answer as too long for a comment, but the short answer is yes, it seems to be a quirk in how the API works between the different platforms. – SDC Apr 11 '12 at 08:09
  • I can confirm that the 'signed_in' param is the culprit – Cameron Drake Dec 09 '16 at 05:41

4 Answers4

8

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.

SDC
  • 14,192
  • 2
  • 35
  • 48
  • Glad you found it. I'm not sure it's a bug: the API is behaving as documented (that is, give it what it's expecting and it will work; something unexpected gives undefined results). The fact that it *does* work in desktop browsers if you feed it something unexpected is a bonus rather than a bug. I suspect that if there is a "fix", it will be to make sure it fails given the wrong input! – Andrew Leach Apr 11 '12 at 09:59
  • @AndrewLeach - I agree, but I still say its a bug, because (a) it's inconsistent between platforms, and (b) if it does fail, the problem only manifests itself further down the line, making it hard to find the source of the issue. My suggestion to Google would be to (a) make it consistent between platforms and (b) if it's going to fail, throw an error at the point where the marker is created, rather than having the marker display fine, but not clickable. We spent ages trying to debug our click event before working out that it was actually the marker creation that had the problem. – SDC Apr 12 '12 at 10:52
  • This just saved me from many hours of frustration. Huge thanks! – GEMI May 25 '12 at 12:09
1

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);
Steven Web
  • 1,966
  • 13
  • 23
0

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

mikevoermans
  • 3,967
  • 22
  • 27
  • Thanks for answering. My copy+pasting into the question may not have been perfect (I had to extract the relevant code from a more complex function), but the parens are good in the orginal code -- as stated, the code works fine when run on a desktop browser. – SDC Apr 10 '12 at 14:55
  • hmm, the problem in that question does sound similar. Sadly the answer given there is not the solution to my problem (we're not in a loop and I'm quite comfortable with closures). But thanks for trying; that's the most relevant link I've seen so far, even if it didn't help. :-) – SDC Apr 10 '12 at 15:30
0

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>
AlexT
  • 38
  • 1
  • 7