2.3.0 • Published 7 months ago
delbari-react-google-map v2.3.0
delbari-react-google-map
use google map in react
Install
npm install --save delbari-react-google-map
Usage
import React from 'react'
import { GoogleMap } from 'delbari-react-google-map'
import 'delbari-react-google-map/dist/index.css'
import markerImage from "./images/LogoMap.svg"
const InfoWindowContent = () => {
return <div>
<h2>Info Window Content</h2>
<p>This is the content of the Info Window.</p>
</div>
;
};
const App = () => {
const StylesMe = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
return <GoogleMap
apiKey={"**********"}
styles={StylesMe}
infoWindows={<InfoWindowContent />}
lat={ 50.375}
lng={ -4.195}
zoom={16}
width={"500px"}
height={"700px"}
markerIcon= {markerImage}
markerWidth={20}
markerHeight={20}
/>
}
export default App
Props
Prop | Type | valueExample | description |
---|---|---|---|
apiKey | String | ********* | You need ApiKey from google |
styles | Array | [] | See Sample |
infoWindows | React Component or Html Tag | <div>Test</div> | For Custom Info Windows |
lat | Number | 50.375 | |
lng | Number | -4.195 | |
zoom | Number | 8 | |
width | Style | 800px or 50% | Map Width |
height | Style | 800px or 50% | Map Height |
markerIcon | Image | .jpg - .png - .svg and ... | |
markerWidth | Style | 20px | |
markerHeight | Style | 20px |
License
ard4030 © ard4030