beyonk-group / svelte-googlemaps Goto Github PK
View Code? Open in Web Editor NEWSvelte Google Maps Components
Svelte Google Maps Components
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
Do you have a component to set a Marker on a map?
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.)
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 })
}
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.
Hiya, just curious if this will this be updated to support runes mode and svelte 5 ? :)
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
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:
viewValue
prop to be able to show our saved locationcurrentPlace
is not set upon initialization of the fieldblur
function calls clear
because viewValue
!== currentPlace?.[viewLabel]
For new Facilities in our implementation:
blur
does NOT call clear
because our viewValue
formats the location in the same way as currentPlace[viewLabel]
blur
DOES call clear
because our viewValue
formatting drops "USA" off of the location, therefore viewValue !== currentPlace[viewLabel]
viewValue
location matches the currentPlace[viewLabel]
valueProvides all options, reduces complexity of this library.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.