My location Google Maps overlay

Show Coordinates (latitude, longitude, accuracy) on map

Motivation

Why not just draw a circle shape 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
• Package allows to choose destination 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
// …
// 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:

// …

// 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 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)
• {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