beyonk-group/svelte-googlemaps

Svelte Google Maps Components

Svelte Google Maps

Maps and Places components in Vanilla JS (or Svelte)

Particular focus on efficient loading of Google components in an SPA.

SSR Ready

WIP

Documentation is a WIP. Be prepared to examine the source code to get any use out of this right now!

The GoogleMap and GooglePlacesAutocomplete components are a Google Map and Google Places Autocomplete component respectively.

Usage

To use within a Svelte application:

<GooglePlacesAutocomplete apiKey="your-maps-api-key"/>
<GoogleMap apiKey="your-maps-api-key"/>

<script>
  import { GoogleMap, GooglePlacesAutocomplete } from '@beyonk/svelte-googlemaps'
</script>

Options

Autocomplete

Attribute	Purpose	Allowed	Default
ariaLabel	Sets aria-label value on input	string	'location'
on:placeChanged	Place changed event (does not fire if user hit enter without selecting an address)	any function	-
placeholder	placeholder text	any string	-
styleClass	css styles for input	any classes	-