React Google Maps Native

A lightweight TypeScript 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

Features

• Written in TypeScript with full type definitions
• No dependencies on other map libraries
• Uses the native Google Maps JavaScript API directly
• Provides React components for Maps, Markers, Paths, and Clusters
• Proper cleanup of event listeners and DOM elements

Basic Usage

1import { GoogleMap, Marker, Path, Cluster } from 'react-google-maps-native';
2
3// Basic Map
4const MapComponent = () => {
5  return (
6    <GoogleMap 
7      apiKey="YOUR_GOOGLE_MAPS_API_KEY"
8      center={{ lat: 37.7749, lng: -122.4194 }}
9      zoom={12}
10    />
11  );
12};
13
14// Map with Markers
15const MapWithMarkers = () => {
16  return (
17    <GoogleMap 
18      apiKey="YOUR_GOOGLE_MAPS_API_KEY"
19      center={{ lat: 37.7749, lng: -122.4194 }}
20      zoom={12}
21    >
22      <Marker 
23        position={{ lat: 37.7749, lng: -122.4194 }}
24        title="San Francisco"
25        infoWindowContent={<div>Welcome to San Francisco!</div>}
26      />
27      <Marker 
28        position={{ lat: 37.7647, lng: -122.4321 }}
29        title="Golden Gate Park"
30      />
31    </GoogleMap>
32  );
33};
34
35// Map with Path
36const MapWithPath = () => {
37  const pathCoordinates = [
38    { lat: 37.7749, lng: -122.4194 },
39    { lat: 37.7647, lng: -122.4321 },
40    { lat: 37.7837, lng: -122.4324 }
41  ];
42
43  return (
44    <GoogleMap 
45      apiKey="YOUR_GOOGLE_MAPS_API_KEY"
46      center={{ lat: 37.7749, lng: -122.4194 }}
47      zoom={12}
48    >
49      <Path 
50        path={pathCoordinates}
51        options={{
52          strokeColor: '#0000FF',
53          strokeOpacity: 0.8,
54          strokeWeight: 3
55        }}
56      />
57    </GoogleMap>
58  );
59};
60
61// Map with Marker Clustering
62const MapWithClusters = () => {
63  const markers = [
64    { id: 1, position: { lat: 37.7749, lng: -122.4194 }, title: "San Francisco" },
65    { id: 2, position: { lat: 37.7647, lng: -122.4321 }, title: "Golden Gate Park" },
66    { id: 3, position: { lat: 37.7837, lng: -122.4324 }, title: "Fisherman's Wharf" }
67    // More markers...
68  ];
69
70  return (
71    <GoogleMap 
72      apiKey="YOUR_GOOGLE_MAPS_API_KEY"
73      center={{ lat: 37.7749, lng: -122.4194 }}
74      zoom={12}
75    >
76      <Cluster>
77        {markers.map(marker => (
78          <Marker 
79            key={marker.id}
80            position={marker.position}
81            title={marker.title}
82          />
83        ))}
84      </Cluster>
85    </GoogleMap>
86  );
87};

API Reference

GoogleMap

Main component that renders a Google Map instance.

Props:

Prop	Type	Default	Description
apiKey	string	required	Your Google Maps API key
center	LatLngLiteral	{ lat: 0, lng: 0 }	The initial center position of the map
zoom	number	10	The initial zoom level of the map
options	MapOptions	{}	Additional map options (see Google Maps API)
containerStyle	CSSProperties	{ 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

Component for placing markers on the map.

Props:

Prop	Type	Default	Description
position	LatLngLiteral	required	The position of the marker (lat, lng)
icon	string/Icon/Symbol	-	Custom icon URL or object
label	string/MarkerLabel	-	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	ReactNode	-	Content for the info window
zIndex	number	-	The zIndex of the marker

Path

Component for drawing lines on the map.

Props:

Prop	Type	Default	Description
path	LatLngLiteral[]	required	Array of positions (lat, lng)
options	PolylineOptions	{ 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

Component for clustering markers.

Props:

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