Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/piotr-cz/gmaps-overlay-mylocation
Show coordinates on Google Map
https://github.com/piotr-cz/gmaps-overlay-mylocation
google-maps google-maps-overlay javascript
Last synced: 27 days ago
JSON representation
Show coordinates on Google Map
- Host: GitHub
- URL: https://github.com/piotr-cz/gmaps-overlay-mylocation
- Owner: piotr-cz
- License: mit
- Created: 2019-06-28T09:33:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:20:51.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T23:45:33.207Z (about 1 month ago)
- Topics: google-maps, google-maps-overlay, javascript
- Language: JavaScript
- Size: 543 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# My location Google Maps overlay
Show [Coordinates](https://developer.mozilla.org/en-US/docs/Web/API/Coordinates) (latitude, longitude, accuracy) on map![screenshot](./images/screenshot.png)
## Motivation
Why not just draw a [circle shape](https://developers.google.com/maps/documentation/javascript/examples/circle-simple) to show accuracy area?
- Package is using HTML element to draw accuracy area. It's easier to style standarad HTML element via CSS and work with native events than using [google.maps.Circle](https://developers.google.com/maps/documentation/javascript/reference/polygon#Circle)
- Package allows to choose destination pane layer.
_(handy when using multiple overlays)_.## Installation
```sh
npm install @piotr-cz/gmaps-overlay-mylocation
```## Setup
```js
// Import library
import mylocationOverlayFactory from '@piotr-cz/gmaps-overlay-mylocation'// Import styles if your module bundler supports it
import '@piotr-cz/gmaps-overlay-mylocation/dist/gmaps-overlay-mylocation.css'// Initialize Google Maps API and create new map instance
// …
// const mapInstance = new window.google.maps.map()// Initialize overlay via callback
const mylocationOverlay = mylocationOverlayFactory(window.google.maps, {
map: mapInstance,
onAdded: mylocationOverlay => console.log('MylocationOverlay: Initialized, may set coords now')
})```
When you prefer promises over callbacks, use _initialize_ method:
```js
// …// Initialize overlay aynchronously (requires Promise support)
const mylocationOverlay = mylocationOverlayFactory(window.google.maps)await mylocationOverlay.initialize(mapInstance)
```## Usage
```js
// Get geolocation position
const position = await new Promise((resolve, reject) =>
window.navigator.geolocation.getCurrentPosition(resolve, reject, {enableHighAccuracy: true})
)// Set coordinates on overlay and show position
mylocationOverlay.setCoordinates(position.coords)
```## Options
- _{google.maps.Map}_ **map** - Map instance
- _{boolean}_ **showMarker** - Show marker (defaults to `true`)
- _{boolean}_ **showAccuracy** - Show accuracy area (defaults to `true`)
- _{string}_ **paneName** - Define pane to use for accuracy element (defaults to `'overlayLayer'`, see [MapPanes](https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapPanes))
- _{Object|string}_ **markerIcon** - Pass custom marker definition (see [Icon](https://developers.google.com/maps/documentation/javascript/reference/marker#Icon)|[Symbol](https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol))
- _{string}_ **accuracyClassName** - Accuracy element className (Defaults to `'gmaps-overlay-mylocation-accuracy'`)
- _{function}_ **onAdded** - Overlay initialized callback## Methods
- **initialize(mapInstance: google.maps.Map): Promise** - Initialize overlay
- **setCoordinates(coords: Coordinates)** - Set [Coordinates](https://developer.mozilla.org/en-US/docs/Web/API/Coordinates) (automatically shows overlay)
- **show()** - Show overlay
- **hide()** - Hide overlay
- **toggle(state: boolean)** - Toggle overlay visibility
- **getMarker(): google.maps.Marker** - Get marker
- **getAccuracyElement(): HTMLElement** - Get accuracy HTML element