🗺🎯 location-picker

Efficiently allow your users to pick a location!

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!

LIVE DEMO

DOCUMENTATION

Requirements

Google Maps v3

Installation

npm install location-picker --save

Import libraries using HTML:

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 using Typescript or Angular

import LocationPicker from "location-picker";

Import using CommonJS / Node:

var locationPicker = require("location-picker")

Usage

Add element in HTML with a unique id:

#map {
    width: 100%;
    height: 480px;
}
<div id="map"></div>

Initialize the locationPicker plugin:

Plain JavaScript:

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

Angular:

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

Methods

locationPicker(elementId, pluginOptions, mapOptions)

Returns a reference to the locationPicker object

`element`: `string` | `HTMLElement`

The ID of the HTML element you want to initialize the plugin on or a direct reference to the HTMLElement.

`pluginOptions`:

Options specific for this plugin

lat: latitude of initial needed position
lng: longitude of initial needed position
setCurrentPosition: 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 if lat and lng are supplied. (defaults to true)

`mapOptions`:

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

locationPicker.getMarkerPosition()

Returns an object that contains the lat and lng of the currently selected position.

Properties

locationPicker.element

A reference to the element the plugin was initialized on.

locationPicker.map

A reference to the Google Map object

Examples

HTML Full Example

<!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>

Angular Example

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

basilboli/location-picker