const initializeMap = (Map) => { return GoogleApiWrapper({ apiKey: process.env.REACT_APP_MAPS_API_KEY, libraries: ['places', 'visualization'], LoadingContainer, })(Map) }
this.state.drivers.map((drivers, index) => { return <Marker key={index} id={index} position={{ lat: drivers.location.latitude, lng: drivers.location.longitude }} /> })
render() { const {google} = this.props; return ( <Map google={google}> <Polygon paths={paths} {...polygonProps} /> </Map> ) }
render() { const mapStyles = { width: '100%', height: '100%', }; const initialLatitude = 51.5049375; const initialLongitude = -0.0964509; return ( <Map google={this.props.google} defaultZoom={15} style={mapStyles} initialCenter={{lat: initialLatitude, lng: initialLongitude}} > <Marker position={{ lat: initialLatitude, lng: initialLongitude }}/> {this.displayMarkers()} </Map> ); }
render() { const {children, google} = this.props; return ( <GoogleMaps google={google} initialCenter={{ lat: 38, lng: -99, }} zoom={4} > { children } </GoogleMaps> ) }
populationData, }; return <Polygon key={`polygon-${id}`} paths={points} {...options} onClick={updateAndDisplayInfoWindow} /> }) } <InfoWindow position={infoWindowPosition} visible={showInfoWindow}> <h3> { activePolygon ? activePolygon.stateAbbreviation : '' }
render() { const {google} = this.props; const {showInfoWindow, activeMarker} = this.state; return ( <Map google={google}> <Marker name="Omaha" position={{ lat: 41.2565, lng: -95.9345 }} onClick={this.markerClicked.bind(this)} /> <InfoWindow marker={activeMarker} visible={showInfoWindow} > <div> <strong>Info Window</strong> <div> Information would be displayed here. </div> </div> </InfoWindow> </Map> ) }