Gathering detailed insights and metrics for @fleetclear-connect/react-google-maps-native
Gathering detailed insights and metrics for @fleetclear-connect/react-google-maps-native
Installations
npm install @fleetclear-connect/react-google-maps-nativeDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
20.13.1
NPM Version
10.9.0
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.1.7
Package Id
@fleetclear-connect/react-google-maps-native@0.1.7
Unpacked Size
98.89 kB
Size
17.43 kB
File Count
21
NPM Version
10.9.0
Node Version
20.13.1
Published on
Apr 24, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Google Maps React Native
A lightweight React library for integrating Google Maps into your application using the native Google Maps JavaScript API. This package provides ready-to-use components for creating maps, adding markers, drawing paths, and clustering markers without any external map package dependencies.
Installation
1npm install react-google-maps-native
or
1yarn add react-google-maps-native
Usage
Basic Map
1import { GoogleMap } from 'react-google-maps-native'; 2 3const MapComponent = () => { 4 return ( 5 <GoogleMap 6 apiKey="YOUR_GOOGLE_MAPS_API_KEY" 7 center={{ lat: 37.7749, lng: -122.4194 }} 8 zoom={12} 9 /> 10 ); 11};
Map with Markers
1import { GoogleMap, Marker } from 'react-google-maps-native'; 2 3const MapWithMarkers = () => { 4 return ( 5 <GoogleMap 6 apiKey="YOUR_GOOGLE_MAPS_API_KEY" 7 center={{ lat: 37.7749, lng: -122.4194 }} 8 zoom={12} 9 > 10 <Marker 11 position={{ lat: 37.7749, lng: -122.4194 }} 12 title="San Francisco" 13 infoWindowContent={<div>Welcome to San Francisco!</div>} 14 /> 15 <Marker 16 position={{ lat: 37.7647, lng: -122.4321 }} 17 title="Golden Gate Park" 18 /> 19 </GoogleMap> 20 ); 21};
Map with Path
1import { GoogleMap, Path } from 'react-google-maps-native'; 2 3const MapWithPath = () => { 4 const pathCoordinates = [ 5 { lat: 37.7749, lng: -122.4194 }, 6 { lat: 37.7647, lng: -122.4321 }, 7 { lat: 37.7837, lng: -122.4324 } 8 ]; 9 10 return ( 11 <GoogleMap 12 apiKey="YOUR_GOOGLE_MAPS_API_KEY" 13 center={{ lat: 37.7749, lng: -122.4194 }} 14 zoom={12} 15 > 16 <Path 17 path={pathCoordinates} 18 options={{ 19 strokeColor: '#0000FF', 20 strokeOpacity: 0.8, 21 strokeWeight: 3 22 }} 23 /> 24 </GoogleMap> 25 ); 26};
Map with Marker Clustering
1import { GoogleMap, Marker, Cluster } from 'react-google-maps-native'; 2 3const MapWithClusters = () => { 4 const markers = [ 5 { id: 1, position: { lat: 37.7749, lng: -122.4194 }, title: "San Francisco" }, 6 { id: 2, position: { lat: 37.7647, lng: -122.4321 }, title: "Golden Gate Park" }, 7 { id: 3, position: { lat: 37.7837, lng: -122.4324 }, title: "Fisherman's Wharf" } 8 // More markers... 9 ]; 10 11 return ( 12 <GoogleMap 13 apiKey="YOUR_GOOGLE_MAPS_API_KEY" 14 center={{ lat: 37.7749, lng: -122.4194 }} 15 zoom={12} 16 > 17 <Cluster> 18 {markers.map(marker => ( 19 <Marker 20 key={marker.id} 21 position={marker.position} 22 title={marker.title} 23 /> 24 ))} 25 </Cluster> 26 </GoogleMap> 27 ); 28};
API Reference
GoogleMap
| Prop | Type | Default | Description |
|---|---|---|---|
| apiKey | string | required | Your Google Maps API key |
| center | object | { lat: 0, lng: 0 } | The initial center position of the map |
| zoom | number | 10 | The initial zoom level of the map |
| options | object | {} | Additional map options (see Google Maps API) |
| containerStyle | object | { width: '100%', height: '400px' } | Style for the map container |
| onLoad | function | - | Callback when map is loaded |
| onClick | function | - | Callback when map is clicked |
| onDragEnd | function | - | Callback when map drag ends |
Marker
| Prop | Type | Default | Description |
|---|---|---|---|
| position | object | required | The position of the marker (lat, lng) |
| icon | string/object | - | Custom icon URL or object |
| label | string | - | Marker label |
| title | string | - | Marker title (shown on hover) |
| draggable | boolean | false | Whether the marker can be dragged |
| onClick | function | - | Callback when marker is clicked |
| onDragEnd | function | - | Callback when marker drag ends |
| showInfoWindow | boolean | false | Whether to initially show the info window |
| infoWindowContent | node | - | Content for the info window |
| zIndex | number | - | The zIndex of the marker |
Path
| Prop | Type | Default | Description |
|---|---|---|---|
| path | array | required | Array of positions (lat, lng) |
| options | object | { strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 } | Path style options |
| onClick | function | - | Callback when path is clicked |
| onMouseOver | function | - | Callback when mouse enters path |
| onMouseOut | function | - | Callback when mouse leaves path |
| editable | boolean | false | Whether the path is editable |
| draggable | boolean | false | Whether the path is draggable |
Cluster
| Prop | Type | Default | Description |
|---|---|---|---|
| options | object | {} | Clustering options |
| onClusteringBegin | function | - | Callback when clustering begins |
| onClusteringEnd | function | - | Callback when clustering ends |
| onLoad | function | - | Callback when clusterer is loaded |
License
MIT
No vulnerabilities found.
No security vulnerabilities found.