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	-

svelte-googlemaps's Issues

ERROR in ./node_modules/@beyonk/svelte-googlemaps/src/GoogleSdk.svelte 25:0-49 Module not found: Error: Can't resolve '@beyonk/async-script-loader' in '/node_modules/@beyonk/svelte-googlemaps/src'

ERROR in ./node_modules/@beyonk/svelte-googlemaps/src/GoogleSdk.svelte 25:0-49 Module not found: Error: Can't resolve '@beyonk/async-script-loader' in '/node_modules/@beyonk/svelte-googlemaps/src'

OS: Windows 11 Home
OS Version: 10.0.22621 Build 22621
svelte version: 3.48.0
svelte-loader: 3.1.2
ts-loader: 9.3.0
typescript: 4.7.2

Unable to use two instances of GooglePlacesAutocomplete on a page

When I try to use a 2nd instance of the <GooglePlacesAutocomplete ... /> Svelte component, only the 1st works. The 2nd remains disabled.

I think I've figured out the fix. Are you still actively maintaining this, @antony? If so, I'll submit a PR.

GooglePlacesAutocomplete clears out selected place on blur

There is a bug with GooglePlacesAutocomplete.svelte where if you focus on a different form element after selecting a place, the places autocomplete will clear itself.

The current logic on blur in GooglePlacesAutocomplete.svelte seems buggy:

  function blur () {
    dispatch('blur')
    if (viewValue !== currentPlace) {
      clear()
    }
  }

But when these variables are set, they're never set to the same value, so this comparison will never succeed.

      if (place.geometry) {
        viewValue = place[viewLabel]
        value = viewValue
        currentPlace = place
        dispatch('placeChanged', { place, selectedPrediction: search.value })
      }

map Markers

Do you have a component to set a Marker on a map?

SvelteKit: "unexpected token 'export'" when using GooglePlacesAutocomplete

In SvelteKit (which uses Vite as a dev server), there seems to be an issue importing @beyonk/async-script-loader, which is a dependency of @beyonk/svelte-googlemaps.

When I added a to my SvelteKit page, the page wasn't able to render via SSR, with this error:

Unexpected token 'export'
C:\Users\[...redacted...]\node_modules\@beyonk\async-script-loader\index.js:1
export default function (urls, test, callback) {
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at nodeRequire (C:\Users\[...redacted...]\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73479:17)
    at ssrImport (C:\Users\[...redacted...]\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73431:20)
    at eval (/node_modules/@beyonk/svelte-googlemaps/src/GoogleSdk.svelte:7:31)

There is some more info on how Vite behaves here: https://vitejs.dev/guide/ssr.html#ssr-externals

I was able to successfully apply one of the workarounds there by adding this to my svelte.config.js file:

    vite: {
      ssr: {
        // Vite's heuristic does not work properly for this ESM-only library for
        // some reason, and it tries to import it as a CommonJS module.
        // Adding the library to noExternal avoids this problem. The symptoms
        // were "SyntaxError: Unexpected token 'export'" in SSR or when building
        // the app for production.
        noExternal: ['@beyonk/async-script-loader']
      }
    }

I'm not sure what the appropriate permanent fix might be here - perhaps a change to package.json in @beyonk/async-script-loader could help inform Vite that the package is ESM-only. (I tried adding "type": "module" to that package.json but that didn't work.)

Package does not work with Sveltekit

I get the following error with a basic install of svelte kit.

installing PNPM and NPM the same error .

Valid values are cleared on blur if viewValue and component's idea of currentPlace are not equivalent

In our codebase, we use the GooglePlacesAutocomplete component to accept user-input for Facility locations, but also to display locations for Facilities that have already been saved to our database.

<GooglePlacesAutocomplete
    apiKey={GOOGLE_MAPS_API_KEY}
    viewValue={facility.city ? formatCity(facility.city) : ''}
    types={['(cities)']}
    fields={['geometry', 'formatted_address', 'address_components']}
    on:placeChanged={e => handlePlaceChange(e, facility)}
    on:clear={() => handlePlaceChange(null, facility)}
/>

<script>
  export function formatCity(city: City, short = false): string {
    if (!city?.name) {
      return 'Unknown city';
    }
    const locationParts = [city.name];
    if (city.state && city.state !== last(locationParts)) {
      locationParts.push(city.state);
    }
    if (city.country.shortCode !== 'US') {
      locationParts.push(short ? city.country.shortCode : city.country.name);
    }
    return locationParts.join(', ');
  }
</script>

For existing Facilities in our implementation:

• We make use of the viewValue prop to be able to show our saved location
• However, currentPlace is not set upon initialization of the field
• Therefore, if you click into the input field, then click out, the blur function calls clear because viewValue !== currentPlace?.[viewLabel]

For new Facilities in our implementation:

• If the location entered is in Canada and you click into the field then out, blur does NOT call clear because our viewValue formats the location in the same way as currentPlace[viewLabel]
• If the location entered is in the US and you click into the field then out, blur DOES call clear because our viewValue formatting drops "USA" off of the location, therefore viewValue !== currentPlace[viewLabel]
• If the location is anywhere else, it is hit or miss, depending on whether our viewValue location matches the currentPlace[viewLabel] value

Svelte 5 Rune support?

Hiya, just curious if this will this be updated to support runes mode and svelte 5 ? :)

Return Place Id + Coords as well as Value ?

hiya, does your implementation (GooglePlacesAutocomplete.svelte) return the place ID and the lat and long too ? I can get the value eg. the street address, however it would be great to retrieve the place ID and long lat coords too. I'm using your Geocoder to capture data in a form, to then link out to Google maps later on. This would mean when linking out you can pass the coords + street name + place id and get google maps to display the place with all its ratings etc. Currently just doing this with the street address you don't get any of that important info.

Many thanks for the great sveltekit implementation btw! :D

maps.googleapis.com ?csp_test=true return 403 forbidden

Use @googlemaps/js-api-loader

Provides all options, reduces complexity of this library.