x-cite-google-maps

x-cite-google-maps

x-cite-google-maps is a reactjs package, helps you to use google maps into any reactjs app with many features

• Custom Markers
• Custom infoWindow popups
• Points

Installation

x-cite-google-maps requires Reactjs v15+ to run.

$ npm install x-cite-google-maps

$ yarn add x-cite-google-maps

then import the package into the used component

import MapsDemoXcite from 'x-cite-google-maps'

Configuration

x-cite-google-maps is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.

 <MapsDemoXcite points={points} config={mapConfig.key} styles={style}
  />

points object should looks like this:

const points = [ {lat: 54.2, lng: -4.6, info:{key11:"value 11", key12: "value12", key13:"value13"},icon:"http://maps.google.com/mapfiles/ms/icons/red-dot.png" }, {lat: 53.2, lng: -4.7, info:{key21:"value 21", key12: "value22", key13:"value23" }}, {lat: 52.2, lng: -4.8, info:{key21:"value 31", key12: "value32", key13:"value33" }} ]

the key object need to be defined:

const mapConfig = { key: '**********' };

and some styles for the container:

const style = { width: '100%', height: '536px' }