@piotr-cz/gmaps-overlay-mylocation

Google Maps mylocation overlay

Usage no npm install needed!

<script type="module">
  import piotrCzGmapsOverlayMylocation from 'https://cdn.skypack.dev/@piotr-cz/gmaps-overlay-mylocation';
</script>

README

My location Google Maps overlay

Show Coordinates (latitude, longitude, accuracy) on map

screenshot

Motivation

Why not just draw circle shape to show accuracy area?

  • Package is using a HTML element to draw accuracy area. It's easier to style standarad HTML element and work with native events than using google.maps.Circle
  • It's possible to choose pane layer (Handy when using multiple overlays).

Installation

npm install @piotr-cz/gmaps-overlay-mylocation

Setup

// 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
// ...

// 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:

// Initialize overlay aynchronously (requires Promise support)
const mylocationOverlay = mylocationOverlayFactory(window.google.maps)

await mylocationOverlay.initialize(mapInstance)

Usage

// Get geolocation position
const position = await new Promise((resolve, reject) =>
  window.navigator.geolocation.getCurrentPosition(resolve, reject, {enableHighAccuracy: true})
)

// Set coordinates and show
mylocationOverlay.setCoordinates(position.coords)

Options

  • {google.maps.Map} map - Map
  • {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)
  • {Object|string} markerIcon - Pass custom marker definition (see Icon|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. 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