@beyonk/svelte-googlemaps

<a href="https://beyonk.com"> <br /> <br /> <img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" /> <br /> <br /> </a>

Usage no npm install needed!

<script type="module">
  import beyonkSvelteGooglemaps from 'https://cdn.skypack.dev/@beyonk/svelte-googlemaps';
</script>

README

Svelte Google Maps

js-standard-style publish svelte-v3

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 -