react-maps-loader-google
v0.1.1
Published
React map component wrapping the Google Maps API
Downloads
21
Readme
React Maps Loader Google
react-maps-loader-google
is a component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map.
Installation
npm:
npm install --save react-maps-loader-google
yarn:
yarn add react-maps-loader-google
Usage
import GoogleMap from 'react-maps-loader-google';
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMap
apiKey=/* YOUR KEY HERE */
options={{
zoomControl: true,
zoomControlOptions: {
position: 23,
},
...
}}
items={[
{
id: 1,
position: {
lat: 37.541,
lng: 126.986,
},
},
...
]}
/>
</div>
My map doesn't appear!
- Make sure the container element has width and height. The map will try to fill the parent container, but if the container has no size, the map will collapse to 0 width / height. This is not a requirement for
react-maps-loader-google
, its a requirement for google-maps in general.
Features
- Load the Google Maps API while the first usage of the react component.
- Create a map by adding map control options with the data specified in
options
. - Create markers with the data specified in
items
.