https://github.com/beyonk-group/svelte-googlemaps

Svelte Google Maps Components
https://github.com/beyonk-group/svelte-googlemaps

geolocation gmaps google google-maps googlemaps maps places ssr svelte vanilla-javascript vanillajs

Last synced: 3 months ago
JSON representation

Svelte Google Maps Components

• Host: GitHub
• URL: https://github.com/beyonk-group/svelte-googlemaps
• Owner: beyonk-group
• Created: 2019-02-03T19:08:10.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-03-11T09:23:44.000Z (11 months ago)
• Last Synced: 2024-10-29T18:05:50.101Z (3 months ago)
• Topics: geolocation, gmaps, google, google-maps, googlemaps, maps, places, ssr, svelte, vanilla-javascript, vanillajs
• Language: Svelte
• Size: 656 KB
• Stars: 79
• Watchers: 3
• Forks: 20
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    


    


    

    


    




## Svelte Google Maps

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) ![publish](https://github.com/beyonk-adventures/svelte-googlemaps/workflows/publish/badge.svg) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)

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:

```jsx

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

```

### 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 | - |