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