Google Maps React - Making my markers clickable

Question

So I kinda got lost and I tried several codes. I managed to implement the markers however I think i'm doing something incorrect to make them actually clickable and display an InfoWindow.

Answer 1

The Marker by default isn't clickable, besides passing the onClick handler, you need to pass the clickable prop.

You can check all the Marker props in the documentation: https://tomchentw.github.io/react-google-maps/#marker

Answer 2

You have mixed react-google-maps and google-maps-react. Here is the working example for your case: Please add you APIkey in url.

App.js

import React from "react";
import ReactDOM from "react-dom";

const { compose, withProps, withStateHandlers } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} = require("react-google-maps");
const { InfoBox } = require("react-google-maps/lib/components/addons/InfoBox");


const App = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=**YOUR_API_KEY**&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
    center: { lat: 25.03, lng: 121.6 },
  }),
  withStateHandlers(() => ({
    isOpen: false,
  }), {
      onToggleOpen: ({ isOpen }) => () => ({
        isOpen: !isOpen,
      })
    }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={5}
    defaultCenter={props.center}
  >

    <Marker
      position={{ lat: 22.6273, lng: 120.3014 }}
      onClick={props.onToggleOpen}
    >
      {props.isOpen && <InfoBox
        onCloseClick={props.onToggleOpen}
        options={{ closeBoxURL: ``, enableEventPropagation: true }}
      >
        <div style={{ backgroundColor: `yellow`, opacity: 0.75, padding: `12px` }}>
          <div style={{ fontSize: `16px`, fontColor: `#08233B` }}>
            no search place
          </div>
        </div>
      </InfoBox>}
    </Marker>
  </GoogleMap>
);
export default App;

react-google-maps is smart component based using recomose but you can make it class base component too.

This is working codesandbox (temporarily live) : https://codesandbox.io/s/2wwjmx673r Don't forget to add your API key. feel free to ask any question.