Embed Maps

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://api.maps.guru/v1/styles/basic/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://api.maps.guru/v1/styles/basic/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://api.maps.guru/v1/styles/basic/style.json?key=${API_KEY}`}
      initialViewState={{ longitude: 77.5946, latitude: 12.9716, zoom: 12 }}
    />
  );
}