Skip to content
This repository has been archived by the owner on Mar 1, 2024. It is now read-only.
/ reactxp-map Public archive

Plugin for ReactXP that provides support for Google Maps for Web, Android and iOS

License

Notifications You must be signed in to change notification settings

Luxbyte/reactxp-map

Repository files navigation

reactxp-map npm version

Plugin for ReactXP that provides support for Google Maps for Web, Android and iOS.

This repo is archived due to ReactXP having reached End of life
Please consider moving to ReactNative for web

Installation

npm install --save reactxp-map

Prerequisites

Updates

Version 0.3.3

  • Removed ReactDom from native code

Version 0.3.1

  • Migrated react-native to version 0.61.5
  • Updated dependencies

Version 0.2.1

  • Use "react-native-geolocation-service" to fix crashes on Android if GPS is turned off

Version 0.2.0

  • Added Polyline
  • Added Polygon
  • Added Circle
  • Fixed Map onPress when function undefined
  • Updated dependencies

Documentation

Samples

Usage

<ReactXPMap
  style={_styles.container}
  zoom={10}
  mapType="roadmap"
  latitude={49.6106573}
  longitude={6.1293375}
  geolocation={true}
  showLocation={true}
  locationText="You are here!"
  apiKey="YOUR_API_KEY"
>
  <Marker latitude={49.6119289} longitude={6.1370552} title="Luxembourg City" description="Capital city of Luxembourg" color="00c00c" onPress={this.showMessage}/>
  <Marker latitude={49.6285071} longitude={6.2148438} title="Luxembourg Airport" color="2fb6ab" onPress={this.showMessage}/>
  <Direction destination={{latitude: 49.6119289, longitude: 6.1370552}}/>
  <Direction origin={{latitude: 49.6002236, longitude: 6.1333581}} destination={{latitude: 49.609966, longitude: 6.129702}} travelMode="walking" strokeColor="red" strokeWidth={3}/>
</ReactXPMap>

Component API

<Map/> Component API

<Marker/> Component API

<Direction/> Component API

<Polyline/> Component API

<Polygon/> Component API

<Circle/> Component API

Troubleshooting

Geolocating does not work on Android

Make sure you have set the ACCESS_FINE_LOCATION permission in your AndroidManifest.xml.

If you are using Android API23+ you need to ask for the ACCESS_FINE_LOCATION permission at runtime. See https://facebook.github.io/react-native/docs/permissionsandroid for more information.

License

This project is licensed under the MIT License - see the LICENSE file for details

About

Plugin for ReactXP that provides support for Google Maps for Web, Android and iOS

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •