Marker Taps Inconsistent (iOS) about google-map-react

[istarkov]

I can't, have no access to any ios device.

[jedwards1211]

I do, I can test this out at some point. @arvinkx are you using fastclick or anything like it?

[arvinkx]

I'm actually experiencing the problem with the examples included here as well as my own project - http://istarkov.github.io/google-map-react/map/main/ - let me know if I can do anything to help, I don't think my skill set is quite as refined as yours but I am willing to help anyway I can if you actually are able to reproduce the issue on your end also.

[jedwards1211]

It'll be a bit tricky to debug I'm sure. Probably it will be necessary to put print statements in your local copy of the google map source and use something like http://jsconsole.com to see what it prints out from your iPhone (though I think if you own a Mac there's a better debugging experience?) I'm just busy so I don't know exactly when I could take a look at this issue, but if I can give you pointers on investigating it yourself you might be able to figure it out before I have time to look at it.

[jedwards1211]

Oh, looking through the code I see what the problem is. The method that handles the mouse click event just calls your handler with whatever marker is currently hovered. Works fine on a computer with an actual mouse, but since hovering works differently on touch devices, that's why you're seeing the issue. Later I'll try to make it go use the "what marker is closest to this x,y" logic on a mouse click instead of using the hovered marker.

[arvinkx]

Ok, I have access to iOS Safari debugging (I have a Mac and you can remote debug using safari on both devices) so if you need anything from me let me know, and again thanks for all the help, it's greatly appreciated.

[martingg88]

anyone manage to solve this issue?

[arvinkx]

I was able to solve the problem in the way @jedwards1211 described, I have extensively altered my version and haven't had time to do a PR for the items. You need to rewrite the selection logic as it uses the item that is currently being hovered to determine which child to select - I rewrote the logic to add touch events and now the logic looks for the nearest marker (using R-Tree - I had already integrated an R-tree library for another feature I wanted).

[martingg88]

do you mind to share that portion of code?

[arvinkx]

I no longer have access to the code in question but from what I can remember google_maps.js needs to have touchstart and touchend events added to the map in the initMap function and the onMouseMove function needs to check the event to see if it is fired due to touch and respond by reading the touch coordinates instead. Then google_map_markers.js needs to be modified to include an R-Tree-type library (I used r-bush) and in onChildClick you use the R-Tree library to search for the nearest map markers to the coordinates where the touch/click occurred. Hopefully this helps get what you need.

[martingg88]

hope there is someone else who can help to solve this issue. anyone?

[istarkov]

Can solve any issue in exchange for http://www.apple.com/ipad-pro/ ;-)

[hellogerard]

I was very excited to use this library on Cordova, and ran into this issue too :-(

As a workaround, it appears that standard React touch events work on the marker component itself. This may work for you, depending on what you're trying to do. You'd then have to pass in a callback to affect the map itself.

(not tested):

const MapMarker = React.createClass({
  propTypes: {
    onMarkerClicked: React.PropType.func
  },

  onClick() {
    this.props.onMarkerClicked();
  },

  render() {
    return (
      <div onClick={this.onClick}>
        marker
      </div>
    );
  }
});

export default MapMarker;

[martingg88]

many thanks to you. will try it out and see how it work.