A strongly typed URL builder for Google Maps Static.
npm install static-google-map-tsA strongly typed URL builder for Google Maps Static.
This is designed to be [mostly] compatible with the static-google-map package, but is written
entirely in TypeScript. To reduce dependencies, it doesn't have implement asynchronous asyncStaticMapUrl method, however it supports
Encoded Polyline Algorithm Format. See Paths
```
npm install static-google-map-ts
`ts
import { staticMapUrl, GoogleMapImage } from "static-google-map-ts";
const options: GoogleMapImage = {
key: "Your API Key",
size: {width: 600, height: 600}, // Also accepts a string, eg. "600x600"
zoom: 8,
markers: {
location: "TipsTrade,GBR", // Also accepts a google.maps.LatLng or google.maps.LatLngLiteral
},
const url = staticMapUrl(options);
`
Documentation isn't unavailable yet, however the properties usage is described in the Maps Static API Documentation. JSDoc comments are also provided for all types and interfaces.
Most properties should be self explanatory, however some are Union types:
- AnchorType - Can be any of the followingAnchor
- * a string containing an anchor ("left", "top", etc)
- * a string containing an x,y point ("16, 21")
- * an interface {x:16, y:21}ColorType
- - Can be any of the followingLocationType
- * a string from the set of colors ("black", "brown" etc)
- * a 24-bit RGB ("0xaabbcc") or 32-bit RGBA ("0xaabbccff") hex string
- * a number
- - Can be any of the followingLatLng
- * a string cotnaining a place
- * a string containing a position, ("51.75, -1")
- * a interface, as used by the Google Maps APILatLngLiteral
- * a interface, as used by the Google Maps APISizeType
- - Can be any of the followingSize
- * a string containing a size ("600x400")
- * a interface {width: 600, height: 400}
The Path interface accepts both an array of LocationType objects or a string containing Encoded Polyline Algorithm Format.
#### Usage alongside the Google Directions API
` ts
new google.maps.DirectionsService().route({
origin: "Dublin",
destination: "Limerick",
travelMode: google.maps.TravelMode.DRIVING,
}, (result, status) => {
if (!result || status !== google.maps.DirectionsStatus.OK) {
return;
}
// The overview_polyline contains a simplified route path and is already encoded
const points = result.routes[0].overview_polyline;
const url = staticMapUrl({
key: "Your API Key",
size: {width: 600, height: 400},
paths: {
points,
},
})
console.log(url);
});
``