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 -

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes