Вы смешали react-google-maps
и google-maps-react
. Вот рабочий пример для вашего случая:
Пожалуйста, добавьте свой API-ключ в 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;
response-google-maps - это умный компонент, основанный на использовании рекомоз, но вы также можете сделать его базовым компонентом класса.
Это рабочие коды и коробка (временно живая): https://codesandbox.io/s/2wwjmx673r
Не забудьте добавить свой ключ API.
не стесняйтесь задавать любые вопросы.