This application requires JavaScript.
maps.guru
maps for vue

Vue maps, the boring infra part sorted.

We build and maintain @geoql/v-maplibre, the Vue 3 components that wrap maplibre-gl. Import VMap, drop a `:options` prop, and get a fully reactive map with zero refs.

Get a free API key Vue docs
install
pnpm add @geoql/v-maplibre maplibre-gl
vue
<script setup lang="ts">
import { VMap, VControlScale, VControlNavigation } from '@geoql/v-maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
import '@geoql/v-maplibre/dist/v-maplibre.css';
import type { MapOptions } from 'maplibre-gl';

const MAP_STYLE = 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY';

const options: MapOptions = {
  style: MAP_STYLE,
  center: [77.209, 28.6139],
  zoom: 11,
  hash: true,
};
</script>

<template>
  <VMap :options="options" class="map-canvas" @loaded="onMapReady">
    <VControlNavigation position="top-right" />
    <VControlScale position="bottom-left" />
  </VMap>
</template>

<style>
.map-canvas { width: 100%; height: 480px; }
</style>
live · Vue preview

Why Vue teams ship on maps.guru

Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.

  • VMap is a first-class Vue 3 component with no manual onMounted/onUnmounted.
  • Type-safe options prop with full MapOptions inference from maplibre-gl.
  • Supports VMarker, VPopup, VLayerMaplibre* children via slots for declarative map composition.

Frequently asked

Maps for other frameworks

Ready to build with
beautiful basemaps?

Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.

Contact us
Free forever plan
5-minute setup
No credit card