CODEWITHSUNDEEP
javascriptreactjsgoogle-map-react
Emanuele
Emanuele

Reputation: 2404

ReactJS - JavaScript: How to zoom on customized marker after click on it

Usig google-map-react, how do I zoom on a customized marker after I click on it? I am able to click on the marker but it is not zooming after the click.

Below a snippet of code for the most important parts:

GoogleMap.js

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

const markerStyle = {
    position: 'absolute'
};

function CustomMarker({ lat, lng, onMarkerClick }) {
    return (
        <div onClick={onMarkerClick} lat={lat} lng={lng}>
            <img style={markerStyle} src={icon} alt="icon" />
        </div>
    );
}
function MapClick({ center, zoom, data }) {
    function handleMarkerClick() {
        console.log('Click');
    }
}


class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true,
            buttonClickedAt: null,
            progress: 0,
            ships: [],
            type: 'All'
        };
    }

// Operations.......

render() {
    return (
        <div className="google-map">
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'My_KEY' }}
                center={{
                    lat: 42.4,
                    lng: -71.1
                }}
                zoom={8}
                defaultZoom={zoom}
                defaultCenter={center}
            >
                {/* Rendering all the markers here */}
                {this.state.ships.map((ship) => (
                    <Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE} />
                ))}

                {/* Trying to focus on the marker after clicking on it */}
                {data.map((item, idx) => {
                return <CustomMarker  onMarkerClick={handleMarkerClick} key={idx} lat={item.lat} lng={item.lng} />
                })}

            </GoogleMapReact>
        </div>
    );
}
}

ShipTracker.js is where I detect the correct click event:

const Ship = ({ ship }) => {
    const shipName = ship.NAME;
    const company = shipCompanyMap[shipName];

    function handleMarkerClick() {
        console.log('marker clicked');
    }

    const shipImage = companyImageMap[company];
    return (
        <div onClick={handleMarkerClick}>
            {/* Render shipImage image */}
            <img src={shipImage} alt="Logo" />
        </div>
    );
};
export { Ship };

What I have done so far:

what I tried so far:

1) I came across this source and that was useful to understand how to create a marker but unfortunately I was not able to solve the problem.

2) In my case I use google-map-react instead of google-map. I know that the procedure is similar, but for some reasons I might be missing something.

3) After digging more into the problem I came across this source and it was very useful but still I could not fix the problem.

Upvotes: 0

Views: 1331

Answers (1)

Travnikov.dev
Travnikov.dev

Reputation: 464

I'm not sure but you can try to get instance of map throw ref like 

<GoogleMapReact ref={this.map}

and then use it in handler 

function handleMarkerClick(marker) {
    this.map.panTo(marker.coordinates);
}

Upvotes: 1

Related Questions