Map Integration
Embed Maps
Embed interactive maps on your website using maps.guru.
Add interactive maps to any website using MapLibre GL JS with maps.guru tile services.
Quick Embed
The simplest way to add a map:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<style>
#map { width: 100%; height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY',
center: [77.5946, 12.9716], // Bangalore
zoom: 12
});
</script>
</body>
</html>
Using npm
Install MapLibre GL JS via npm for bundled applications:
npm install maplibre-gl
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
const map = new maplibregl.Map({
container: 'map',
style: `https://maps.guru/api/v1/styles/standard/light/style.json?key=${API_KEY}`,
center: [77.5946, 12.9716],
zoom: 12
});
Adding Markers
new maplibregl.Marker()
.setLngLat([77.5946, 12.9716])
.setPopup(new maplibregl.Popup().setHTML('<h3>Bangalore</h3>'))
.addTo(map);
Map Controls
// Navigation controls (zoom + compass)
map.addControl(new maplibregl.NavigationControl());
// Scale bar
map.addControl(new maplibregl.ScaleControl());
// Fullscreen toggle
map.addControl(new maplibregl.FullscreenControl());
// Geolocation
map.addControl(new maplibregl.GeolocateControl());
Framework Integration
Vue 3
Use v-maplibre for Vue 3 integration:
<script setup>
import { MglMap } from '@geoql/v-maplibre';
</script>
<template>
<MglMap
:style="styleUrl"
:center="[77.5946, 12.9716]"
:zoom="12"
/>
</template>
React
Use react-map-gl with the MapLibre adapter:
import Map from 'react-map-gl/maplibre';
function MyMap() {
return (
<Map
mapStyle={`https://maps.guru/api/v1/styles/standard/light/style.json?key=${API_KEY}`}
initialViewState={{ longitude: 77.5946, latitude: 12.9716, zoom: 12 }}
/>
);
}