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