@trackcode/map NPM

@trackcode/map

A lightweight react package to interact with google maps.

npm install --save @trackcode/map

Load 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.