@trackcode/map
v3.0.1
Published
<!-- STORY -->
Downloads
16
Readme
@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