google-map-react draggable marker - onChildMouseMove not working on mobile

Question

This works beautifully on a computer, but I just tried testing it on mobile, and none of the onChildMouse event handlers are recognized. I've tried finding other event handlers, but onChildMouseXXX is the only ones I see for this package. How can I make the draggable marker work? Is there another event I can use, or a known work around to this issue?

import React from "react"
import PropTypes from "prop-types"

import GoogleMapReact from 'google-map-react';

const Marker = () => <div className="markerCircle"></div>;

class DraggableMap extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      center: {
        lat: 0,
        lng: 0
      },
      zoom: 11,
      lat: 0,
      lng: 0,
      draggable: true,
      loaded: false
    }

    this.onChildMouseMove = this.onChildMouseMove.bind(this)
    this.onChildMouseUp = this.onChildMouseUp.bind(this)
    this.onChildMouseDown = this.onChildMouseDown.bind(this)
  }

  componentDidMount() {
    this.setState({
      center: {
        lat: this.props.lat,
        lng: this.props.lng,
      },
      lat: this.props.lat,
      lng: this.props.lng,
      loaded: true
    })
  }

  componentDidUpdate() {
    if(this.props.lat != this.state.lat) {
      this.setState({
        center: {
          lat: this.props.lat,
          lng: this.props.lng,
        },
        lat: this.props.lat,
        lng: this.props.lng,
        loaded: true
      })
    }
  }

  onChildMouseDown(){
      console.log('mouse down')
      // set map no draggable
        this.setState({
            draggable: false,
        });
    }

    onChildMouseUp(){
      console.log('mouse up')
      //set map draggable again
        this.setState({
            draggable: true,
        });
    }

    onChildMouseMove(hoverKey, childProps, mouse){
      console.log('move mouse')
      // Change item data with new coordinates
      // you need set here own store and update function
      this.setState({
        lat: mouse.lat,
        lng: mouse.lng
      }, () => this.props.updateLatLng(this.state.lat, this.state.lng))
    }


  render() {
    if(!this.state.loaded) {
      return null
    }
    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '100%', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: 'yesItIsMyRealKeyHere' }}
          defaultCenter={this.state.center}
          center={{lat: this.state.lat, lng: this.state.lng}}
          defaultZoom={this.state.zoom}
          draggable={this.state.draggable}
          onChildMouseDown={() => this.onChildMouseDown()}
          onChildMouseUp={() => this.onChildMouseUp()}
          onChildMouseMove={(key, childProps, mouse) => this.onChildMouseMove(key, childProps, mouse)}
        >
          <Marker
              key={'id'}
              item={'n'}
              lat={this.state.lat}
              lng={this.state.lng}
            />
        </GoogleMapReact>
      </div>
    );
  }

}

export default DraggableMap;

Answer 1

I can also replicate your issue in my end. I used your code and the 'onChildMouse' function works on the computer but using the browser in my mobile, I can't drag the marker and the alerts I created were not triggered.

I have a different way in making draggable markers/circle using google-map-react. I used the onGoogleApiLoaded and yesIWantToUseGoogleMapApiInternals parameters of <GoogleMapReact >(google-map-react) to access the Google Maps object. Then I passed it to a function that creates a marker or a circle using the Google Maps object then set the draggable parameter for each object to true. I tested and this works in a browser in mobile.

Here's a sample code and the code snippet:

import React, { Component } from "react";
import GoogleMapReact from "google-map-react";

class GoogleMaps extends Component {
  loadMap = (map, maps) => {
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: { lat: 40.756795, lng: -73.954298 },
      radius: 10000,
      draggable: true
    });


 let marker = new maps.Marker({
        position: { lat: 40.856795, lng: -73.954298  },
        map,
        draggable:true,
      });

  };
  render() {
    return (
      <div style={{ height: "400px", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: "YOUR_API_KEY_HERE" }}
          defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
          defaultZoom={10}
          yesIWantToUseGoogleMapApiInternals
          onGoogleApiLoaded={({ map, maps }) => this.loadMap(map, maps)}
        />
      </div>
    );
  }
}

export default GoogleMaps;