Web component · No API key · MIT

Pan the map.
Get the exact lat,lng.

A form field for one precise point. People move the map under a fixed pin, search, paste coordinates or tap “Use my location”, and your form receives "lat,lng". OpenStreetMap needs no API key; Google Maps and MapLibre are there when you choose them.

Latitude–

Longitude–

Drag the map, search, or use your location.

Your form receiveslocation=

Build a no-code snippet

npm i location-picker

Submits with any form
No API key
No location prompt until asked

Get started

Copy, paste, done

One script tag defines <location-picker>. Keep the @3 in the URL: it pins the major version.

index.html

<script src="https://cdn.jsdelivr.net/npm/location-picker@3"></script>

<label for="where">Where is it?</label>
<location-picker id="where" search locate="button" style="height: 400px"></location-picker>
<p>Picked: <output id="out">nothing yet</output></p>
<script>
  document.getElementById('where').addEventListener('change', (e) => {
    document.getElementById('out').textContent = e.detail.value; // "48.85837,2.294481"
  });
</script>

e.detail also has lat, lng, source and, with reverse-geocode, the address.

form.html

<form method="post" action="/places">
  <location-picker name="location" required style="height: 360px"></location-picker>
  <button>Save</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/location-picker@3"></script>

Submits location=48.85837,2.294481. For separate fields add lat-name="lat" lng-name="lng"; required, reset and back/forward restore work like a native input.

edit.blade.php · any server template

<location-picker lat-input="lat" lng-input="lng" required search style="height: 360px">
  <input id="lat" name="lat" value="48.8584" aria-label="Latitude">
  <input id="lng" name="lng" value="2.2945" aria-label="Longitude">
</location-picker>
<script src="https://cdn.jsdelivr.net/npm/location-picker@3"></script>

Your own inputs seed the picker and submit themselves. Without JavaScript they stay visible and editable; jQuery, Livewire and Alpine see native events on them.

main.js

// npm i location-picker
import 'location-picker'; // defines <location-picker>

const picker = document.querySelector('location-picker');
picker.addEventListener('change', (e) => {
  console.log(e.detail.lat, e.detail.lng, e.detail.source);
});

React, Vue, Angular, Svelte, Solid and Preact recipes: docs/frameworks.md. The class without the element: import { LocationPicker } from 'location-picker/core'.

Why it fits forms

One point, done properly

A real form control

Submits name=lat,lng, separate lat/lng fields or your own hidden inputs. required, reset and back/forward restore behave like an input.

No key, no prompt

OpenStreetMap tiles and Photon search by default. The location permission is asked only when someone taps “Use my location”.

Search or paste anything

Type an address, or paste 48.8584, 2.2945, DMS, a geo: URI or a Google, OpenStreetMap or Apple Maps link.

Keyboard and screen reader

Arrow keys pan, +/− zoom, Enter picks. Controls are 44 px targets and every pick is announced politely.

Any framework

Plain HTML, React 19, Vue 3, Angular, Svelte 5, Solid and Preact through standard events; Laravel, Django and Rails through bound inputs.

Ready for AI agents

llms.txt, an Agent Skill in the npm package, typed errors that name the fix, and opt-in WebMCP tools.

No code needed

Two tools for everyone else

Snippet generator

Choose the map, the fields and the language, then paste one block into WordPress, Webflow, Squarespace, Shopify or a plain HTML form. Live preview included.

Open the generator →

Pick link

Send someone a link and get an exact location back: shown with copy buttons, sent to your https page, or posted to the window that opened it. Nothing to install.

Try the pick link →

Documentation

Docs, AI files and test results

Guides

For AI agents

Tested, not claimed

Browser, device and framework results come from the generated test matrix.

Pan the map.Get the exact lat,lng.

Latitude and longitude finder