@trackcode/map
A lightweight react package to interact with google maps.
npm install --save @trackcode/mapLoad Google Maps dynamically (recommended)
import React from "react";
import { Pin } from "@trackcode/map";
const MyMap = () => (
<Map
apiKey="YOU_API_KEY"
libraries="places,geometry" // default "places"
defaultZoom={14}
defaultCenter={{ lat: 52.01525584, lng: 8.52046783 }}
>
<Pin label="A" position={{ lat: 52.02221556, lng: 8.53188536 }} />
</Map>
);Use script tag to load Google Maps
Add this script tag to the <head> of your website:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>Example:
import React from "react";
import { Map, Pin, Driver } from "@trackcode/map";
const MyMap = () => (
<div style={{ width: "350px", height: "400px" }}>
<Map defaultZoom={14} defaultCenter={{ lat: 52.01525584, lng: 8.52046783 }}>
<Pin label="A" position={{ lat: 52.02221556, lng: 8.53188536 }} />
<Driver position={{ lat: 52.01757214, lng: 8.52521203 }} />
</Map>
</div>
);
<Map />
Important component to show the map.
Example
<Map
defaultZoom={14}
defaultCenter={{ lat: 52.01525584, lng: 8.52046783 }}
>Properties
| Name | Type | Default | Description |
|---|---|---|---|
| apiKey | string | Google Maps api key. | |
| libraries | string | places |
Define libraries for Google Maps. |
| version | string | places |
Use specific Google Maps version. |
| children | any |
@trackcode/map components e.g. <Pin />, <Driver />
|
|
| defaultZoom * | number | Default zoom level | |
| defaultCenter * | object | Default center | |
| defaultCenter.lat | number | Latitude | |
| defaultCenter.lng | number | Longitude | |
| defaultFullscreenControl | boolean | true |
The display options for the Fullscreen control. |
| defaultMapTypeControl | boolean | true |
The initial enabled/disabled state of the Map type control. |
| defaultStreetViewControl | boolean | true |
The initial enabled/disabled state of the Street View Pegman control. |
| defaultZoomControl | boolean | true |
The enabled/disabled state of the Zoom control. |
* required
<Pin />
A pin (or marker) to show a location on the map.
Example
<Pin
appearance="subtle"
position={{ lat: 52.0277157, lng: 8.50419146 }}
/>
<Pin position={{ lat: 52.0287157, lng: 8.52419146 }} />
<Pin label="A" position={{ lat: 52.0287157, lng: 8.54419146 }} />Properties
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | string | "primary" |
The base styling to apply to the Pin. Possible values are "primary", "subtle". |
| position * | Object | Set position | |
| position.lat | number | Latitude | |
| position.lng | number | Longitude | |
| label | string | Set label | |
| onClick | function | Handle click event. |
* required
<Driver />
Show a driver point on map. This component is able to animate position changes in a smooth way.
Example
<Driver position={{ lat: 52.0287157, lng: 8.52419146 }} />
<Driver active={false} title="Inactive" position={{ lat: 52.0287157, lng: 8.53419146 }} />Properties
| Name | Type | Default | Description |
|---|---|---|---|
| position * | Object | Set position | |
| position.lat | number | Latitude | |
| position.lng | number | Longitude | |
| title | string | Show a title tooltip | |
| active | boolean | true |
Blur color for active and gray if it's inactive |
* required
<Directions />
Show directions on map.
Example
<Directions
origin={{
location: { lat: 52.012054, lng: 8.537375 },
}}
wayPoints={[{ location: "Herforder Straße 1, Bielefeld" }]}
destination={{
location: "Siegfriedstr. 18, Bielefeld",
}}
/>Properties
| Name | Type | Default | Description |
|---|---|---|---|
| origin * | Object | Settings for origin | |
| origin.location | String | LatLng | Location of origin | |
| destination * | Object | Settings for destination | |
| destination.location | String | LatLng | Location of origin | |
| wayPoints | Array | Way points between origin and destination | |
| wayPoints[].location | String | LatLng | Settings of a way point | |
| autoFitBounds | Boolean | true |
Fit bounds based on direction path |
Type: (Object) LatLng
| Name | Type | Description |
|---|---|---|
| lat | number | Latitude |
| lng | number | Longitude |
* required
<Polygon />
Show polygon on map.
Example
<Polygon
positions={[
{ lat: 52.01525584, lng: 8.52046783 },
{ lat: 52.02382442, lng: 8.52382776 },
{ lat: 52.02029969, lng: 8.53465948 },
{ lat: 52.00129969, lng: 8.53465948 },
{ lat: 52.01665505, lng: 8.55311308 },
{ lat: 52.0192433, lng: 8.55328474 },
]}
/>Properties
| Name | Type | Default | Description |
|---|---|---|---|
| positions * | Array | List of LatLng positions. | |
| positions[].lat | number | Latitude | |
| positions[].lng | number | Longitude | |
| useConvexHull | Boolean | true |
Use "convex hull" to draw outline polygon of a set of positions. |
* required
Inspiration
- react-google-maps, March 2018, https://github.com/tomchentw/react-google-maps
- google-map-react, March 2018, https://github.com/google-map-react/google-map-react