Get Google Map Location (Lat/Lng): Simple JavaScript Location Picker

location-picker is a lightweight JavaScript library that allows you to easily get Google Map location data in your web application.

It renders a Google map and lets users pin a specific spot to retrieve the exact coordinates (Latitude and Longitude) via click or idle position.

Perfect for forms that require a location picker.

How to implement the Google Map Location Picker:

Include the Location Picker library and the Google Maps JavaScript API on the page.

<script src="https://maps.googleapis.com/maps/api/js?key=YouApiKeyHere"></script>
<script src="/dist/location-picker.min.js"></script>

Create a placeholder element in which you want to render the Google Map.

<div id="map"></div>

Initialize the Location Picker.

var map = document.getElementById('map');

var instance = new locationPicker(map, {
    // picker options
  }, {
    // Google Maps Options
});

Get the selected Location (Lat/Lng) on click: listen to the button event to retrieve the Google Map location coordinates:

<button id="confirmPosition">Confirm Position</button>
<p>On click position: <span id="onClickPositionView"></span></p>

var confirmBtn = document.getElementById('confirmPosition');
var onClickPositionView = document.getElementById('onClickPositionView');

confirmBtn.onclick = function () {
  var location = lp.getMarkerPosition();
  onClickPositionView.innerHTML = 'The chosen location is ' + location.lat + ',' + location.lng;
};

Listen to the map idle event, listening to the idle event is more accurate than listening to the ondrag event. And then get the current location and show it in HTML.

<p>On idle position: <span id="onIdlePositionView"></span></p>

google.maps.event.addListener(lp.map, 'idle', function (event) {
  var location = lp.getMarkerPosition();
  onIdlePositionView.innerHTML = 'The chosen location is ' + location.lat + ',' + location.lng;
});

All default options for the location picker.

var instance = new locationPicker(map, {

    // latitude
    lat: 45.5017,

    // longitude
    lng: -73.5673,

    // auto try and detect and set the marker to the the current user's location
    setCurrentPosition: true 
    
  }, {
    // Google Maps Options
});

Changelog:

11/29/2025

• Update

The post Get Google Map Location (Lat/Lng): Simple JavaScript Location Picker appeared first on CSS Script.