https://github.com/traccar/maplibre-google-maps

MapLibre plugin to add Google Maps
https://github.com/traccar/maplibre-google-maps

Last synced: 2 days ago
JSON representation

MapLibre plugin to add Google Maps

• Host: GitHub
• URL: https://github.com/traccar/maplibre-google-maps
• Owner: traccar
• Created: 2024-06-09T21:13:37.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-12T14:32:21.000Z (5 months ago)
• Last Synced: 2024-10-31T11:05:09.222Z (9 days ago)
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 4
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-maplibre - maplibre-google-maps - A library for integrating Google Maps as raster layers into MapLibre GL JS. It uses the new Google Map Tiles API. (Layer Types Plugins / JavaScript)

README

        
# MapLibre Google Maps plugin

Using this plugin you can add Google Maps layers to MapLibre GL JS.

To install dependency use the following NPM command:

```bash

npm install maplibre-google-maps

```

The libary includes two functions:

- `googleProtocol` - protocol handler that needs to be passed to `maplibregl.addProtocol` with `google` as the protocol name

- `createGoogleStyle` - function to create an instance map style; it accepts 3 arguments:

  - `id` - source id; can be any string

  - `mapType` - type of the map; `roadmap` and `satellite` are supported

  - `key` - Google API key with Map Tiles API enabled

Usage example:

```js

import { googleProtocol, createGoogleStyle } from 'maplibre-google-maps';

maplibregl.addProtocol('google', googleProtocol);

const map = new maplibregl.Map({

  container: 'map',

  style: createGoogleStyle('google', 'roadmap', 'YOUR_GOOGLE_KEY'),

});

```

You need to replace `YOUR_GOOGLE_KEY` with your Google API key with Map Tiles API enabled. For more information check the official [Google documentation](https://developers.google.com/maps/documentation/tile/get-api-key).