React.js - react-google-maps events return

Question

I'm using the react-google-maps package in React but I'm struggling to get the onDrag event from the component. My code is as follows:

import React, {Component} from 'react';
import GoogleAddressAutocomplete from './googleaddressautocomplete.js';
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import axios from 'axios';
import NavWrapper from './navwrapper.js';

class MapPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            markers: {
                position: {
                    lat: 48.723627,
                    lng: 21.254199900000003,
                },
                key: Date.now(),
                defaultAnimation: 2,
            },
            mapCenter: { lat: 48.723627, lng: 21.254199900000003 },
            access_token: '',
            address: ''
        }
    }

    handleMapClick = this.handleMapClick.bind(this);
    handleMapDrag = this.handleMapDrag.bind(this);
    handleMapLoad = this.handleMapLoad.bind(this);

    handleMapClick(event) {
        let that = this;
        this.setState({
            markers: {
                position: event.latLng,
                defaultAnimation: 2,
                key: Date.now()
            },
            mapCenter: event.latLng
        });

    

    }

    handleAddressChange(latLngObject, address) {
        console.log('addr: => '+address);
    }

    handleMapDrag(event) {
        console.log(event);
    }

    handleMapLoad(event) {
        console.log(event);
    }

    render() {
        const GoogleMapWrapper = withGoogleMap(props => (
            <GoogleMap
                ref={props.onMapDrag}
                defaultZoom={13}
                defaultCenter={props.center}
                onClick={props.onMapClick}
                onDragEnd={props.onMapDrag}
            >
                <Marker {...props.markers} />
            </GoogleMap>
        ));

        return (
            <div className="row-100">
                <NavWrapper/>
                <GoogleAddressAutocomplete addressChange={this.handleAddressChange.bind(this)} address={this.state.address}/>
                <br />
                <GoogleMapWrapper
                    containerElement={
                        <div style={{ height: `50vh` }} />
                    }
                    mapElement={
                        <div style={{ height: `50vh` }} />
                    }
                    onMapClick={this.handleMapClick.bind(this)}
                    onMapDrag={this.handleMapDrag.bind(this)}
                    onMapLoad={this.handleMapLoad.bind(this)}
                    markers={this.state.markers}
                    center={this.state.mapCenter}
                />
            </div>
        )
    }
}

export default MapPage;

The handleMapDrag(event) function still returns 'undefined'. Could you please help? I need to get the map's center in LatLng format after the map is dragged, either on the onDragEnd event or the onDrag event itself.

Thanks

dallion · Accepted Answer · 2017-05-26 11:08:44Z

So the solution was to call the lat&lng functions on the actual instance, note the 'ref' property on the GoogleMaps object, it's important for proper function.

import React, {Component} from 'react';
import GoogleAddressAutocomplete from './googleaddressautocomplete.js';
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import axios from 'axios';
import NavWrapper from './navwrapper.js';

class MapPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            markers: {
                position: {
                    lat: 48.723627,
                    lng: 21.254199900000003,
                },
                key: Date.now(),
                defaultAnimation: 2,
            },
            mapCenter: { lat: 48.723627, lng: 21.254199900000003 },
            access_token: '',
            address: '',
            mapRef: null
        }
    }

    componentWillMount() {
        
    }

    handleMapClick = this.handleMapClick.bind(this);
    handleMapDrag = this.handleMapDrag.bind(this);
    handleMapLoad = this.handleMapLoad.bind(this);

    handleMapClick(event) {
        let that = this;
        this.setState({
            markers: {
                position: event.latLng,
                defaultAnimation: 2,
                key: Date.now()
            },
            mapCenter: event.latLng
        });

    }

    handleAddressChange(latLngObject, address) {
        console.log('addr: => '+address);
    }

    handleMapDrag() {
        let mapRef = this._mapComponent;
        console.log(mapRef.getCenter().lat()+'; '+mapRef.getCenter().lng());
    }

    handleMapLoad(map) {
        this._mapComponent = map;
    }

    render() {
        const GoogleMapWrapper = withGoogleMap(props => (
            <GoogleMap
                ref={props.onMapLoad}
                defaultZoom={13}
                defaultCenter={props.center}
                onClick={props.onMapClick}
                onDragEnd={props.onDragEnd}
            >
                <Marker {...props.markers} />
            </GoogleMap>
        ));

        return (
            <div className="row-100">
                <NavWrapper/>
                <GoogleAddressAutocomplete addressChange={this.handleAddressChange.bind(this)} address={this.state.address}/>
                <br />
                <GoogleMapWrapper
                    containerElement={
                        <div style={{ height: `50vh` }} />
                    }
                    mapElement={
                        <div style={{ height: `50vh` }} />
                    }
                    onMapClick={this.handleMapClick}
                    onDragEnd={this.handleMapDrag}
                    onMapLoad={this.handleMapLoad}
                    markers={this.state.markers}
                    center={this.state.mapCenter}
                />
            </div>
        )
    }
}

export default MapPage;

The actual center of the map is logged to the console in the handleMapDrag() function.

If you don't mind, do you know how to change zoom control position using this package.

droidv · Accepted Answer · 2017-05-26 10:01:52Z

1

Instead of returning that, return this:

return (
        <div className="row-100">
            <NavWrapper/>
            <GoogleAddressAutocomplete addressChange={this.handleAddressChange.bind(this)} address={this.state.address}/>
            <br />
            <GoogleMapWrapper
                containerElement={
                    <div style={{ height: `50vh` }} />
                }
                mapElement={
                    <div style={{ height: `50vh` }} />
                }
                onMapClick={this.handleMapClick}
                onMapDrag={this.handleMapDrag}
                onMapLoad={this.handleMapLoad}
                markers={this.state.markers}
                center={this.state.mapCenter}
            />
        </div>
    )

You don't need to bind "this" to the methods again in the events, you just want to call them. You just need to bind 'this' to the methods in the constructor.

Pass this:

handleMapClick = this.handleMapClick.bind(this);
handleMapDrag = this.handleMapDrag.bind(this);
handleMapLoad = this.handleMapLoad.bind(this);

to the constructor.

Not quite sure, I didn't work many times with React, but i think those may be the problems.

Hope it helps.

edited May 26, 2017 at 10:01

answered May 26, 2017 at 9:56

droidv

8887 silver badges12 bronze badges

1 Comment

dallion Over a year ago

That's basically the same binding-wise. Anyway, I found a solution to this, I'll post an answer, thanks for the involvement guys ;)

Suddu Chippa · Accepted Answer · 2017-05-26 09:11:06Z

0

did you try giving onDragStart to the GoogleMap Component?

answered May 26, 2017 at 9:11

Suddu Chippa

11 bronze badge

1 Comment

dallion Over a year ago

the GoogleMap component does trigger the function it's event is bound to, thus dragging the map results in a console log but I'm unable to retrieve the GPS coordinates of the current map center

Collectives™ on Stack Overflow

React.js - react-google-maps events return

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related