location-picker allows you to quickly render Google Maps with an overlaying marker providing an easy and quick plug-and-play location picker. It uses Google Maps v3 and it works with all JavaScript flavors!
- Google Maps v3
npm install location-picker --save
From node_modules:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={ENTER YOUR KEY}"></script>
<script src="../node_modules/location-picker/dist/location-picker.min.js"></script>From CDN:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={ENTER YOUR KEY}"></script>
<script src="https://unpkg.com/location-picker/dist/location-picker.min.js"></script>import LocationPicker from "location-picker";var locationPicker = require("location-picker")#map {
width: 100%;
height: 480px;
}
<div id="map"></div>var locationPicker = new locationPicker('map', {
setCurrentPosition: true, // You can omit this, defaults to true
}, {
zoom: 15 // You can set any google map options here, zoom defaults to 15
});let lp = new LocationPicker('map',{
setCurrentPosition: true, // You can omit this, defaults to true
}, {
zoom: 15 // You can set any google map options here, zoom defaults to 15
});Returns a reference to the locationPicker object
The ID of the HTML element you want to initialize the plugin on or a direct reference to the HTMLElement.
Options specific for this plugin
lat: latitude of initial needed positionlng: longitude of initial needed positionsetCurrentPosition: specifies if you want the plugin to automatically try and detect and set the marker to the the current user's location. It has no effect iflatandlngare supplied. (defaults to true)
You can set any specific google maps option here.
For a list of all the available options please visit:
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
Returns an object that contains the lat and lng of the currently selected position.
A reference to the element the plugin was initialized on.
A reference to the Google Map object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key={{ENTER YOUR KEY}}"></script>
<script src="https://unpkg.com/location-picker/dist/location-picker.min.js"></script>
<style type="text/css">
#map {
width: 100%;
height: 480px;
}
</style>
</head>
<body>
<div id="map"></div>
<br>
<button id="confirmPosition">Confirm Position</button>
<br>
<p>On idle position: <span id="onIdlePositionView"></span></p>
<p>On click position: <span id="onClickPositionView"></span></p>
<script>
// Get element references
var confirmBtn = document.getElementById('confirmPosition');
var onClickPositionView = document.getElementById('onClickPositionView');
var onIdlePositionView = document.getElementById('onIdlePositionView');
// Initialize locationPicker plugin
var lp = new locationPicker('map', {
setCurrentPosition: true, // You can omit this, defaults to true
}, {
zoom: 15 // You can set any google map options here, zoom defaults to 15
});
// Listen to button onclick event
confirmBtn.onclick = function () {
// Get current location and show it in HTML
var location = lp.getMarkerPosition();
onClickPositionView.innerHTML = 'The chosen location is ' + location.lat + ',' + location.lng;
};
// Listen to map idle event, listening to idle event more accurate than listening to ondrag event
google.maps.event.addListener(lp.map, 'idle', function (event) {
// Get current location and show it in HTML
var location = lp.getMarkerPosition();
onIdlePositionView.innerHTML = 'The chosen location is ' + location.lat + ',' + location.lng;
});
</script>
</body>
</html>- Import Google maps:
One example could be adding in index.html:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ENTER YOUR KEY}}"></script>- Add map element and button in HTML:
<div id="map"></div>
<button (click)="setLocation()">Submit Location</button>- Add this CSS:
#map {
width: 100%;
height: 480px;
}- Component:
import {Component} from '@angular/core';
import LocationPicker from "location-picker";
@Component({
selector: 'page-location',
templateUrl: 'location.html'
})
export class LocationPage implements OnInit {
lp: LocationPicker;
ngOnInit(){
this.lp = new LocationPicker('map');
}
setLocation() {
console.log(this.lp.getMarkerPosition());
}
}