🗺🎯 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
`

$3

From node_modules:
`html


`

From CDN:
`html


`

$3

`typescript
import LocationPicker from "location-picker";
`

$3

`javascript
var locationPicker = require("location-picker")
`

Usage

$3

`html
#map {
width: 100%;
height: 480px;
}



`

$3

#### Plain JavaScript:
`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:

`typescript
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

$3

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

$3

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

Properties

$3

A reference to the element the plugin was initialized on.

$3

A reference to the Google Map object




Examples

$3


`html

Confirm Position

On idle position:

On click position:



`

$3

* Import Google maps:

One example could be adding in index.html:
`html

`

* Add map element and button in HTML:

`html



Submit Location
`

* Add this CSS:

`css
#map {
width: 100%;
height: 480px;
}
`

* Component:

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