**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](https://cyphercodes.github.io/location-picker/example/)
[DOCUMENTATION](https://cyphercodes.github.io/location-picker/docs/)
## Requirements
* Google Maps v3
## Installation
```
npm install location-picker --save
```
### Import libraries using HTML:
**From `node_modules`:**
```html
```
**From CDN:**
```html
```
### Import using Typescript or Angular
```typescript
import LocationPicker from "location-picker";
```
### Import using CommonJS / Node:
```javascript
var locationPicker = require("location-picker")
```
## Usage
### Add element in HTML with a unique id:
```html
#map {
width: 100%;
height: 480px;
}
```
### Initialize the locationPicker plugin:
#### 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
### 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
```html
Example
On idle position:
On click position:
```
### Angular Example
* Import Google maps:
One example could be adding in `index.html`:
```html
```
* Add map element and button in HTML:
```html
```
* 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());
}
}
```
