Using this plugin you can add Google Maps layers to MapLibre GL JS.
To install dependency use the following NPM command:
npm install maplibre-google-maps
The libary includes two functions:
googleProtocol
- protocol handler that needs to be passed tomaplibregl.addProtocol
withgoogle
as the protocol namecreateGoogleStyle
- function to create an instance map style; it accepts 3 arguments:id
- source id; can be any stringmapType
- type of the map;roadmap
andsatellite
are supportedkey
- Google API key with Map Tiles API enabled
Usage example:
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.