Simple Location Picker con JavaScript y Google Maps

Vista prévia

Descripción

Una biblioteca de selector de ubicación simple que representa un Google Maps en la página web y permite al usuario elegir una ubicación específica en función de la posición de clic o de inactividad.

Funcionamiento

Incluya la biblioteca de selector de ubicación y la API de JavaScript de Google Maps en la página.

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

Cree un elemento de marcador de posición en el que desee renderizar el mapa de Google.

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

Inicialice el selector de ubicación.

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

var instance = new locationPicker(map, {


// picker options

}, {


// Google Maps Options
});

Escuche el evento de botón OnClick, obtenga la ubicación actual y muéstrela en HTML.

<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;
};

Escuche el evento de inactividad del mapa, escuchando el evento inactivo más preciso que escuchar el evento ondrag. Y luego obtener la ubicación actual y mostrarla en 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;
});

Todas las opciones predeterminadas para el selector de ubicación.

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
});