feat!: improve google maps integration

[harlan-zw]

🔗 Linked issue

#103
#187
#169
#83

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The current implementation of Google Maps has some issues, this is due to how unclear API boundaries. We need a tighter coupling around shared map and a placeholder props, everything else needs to be exposed to end users so they can implement it themselves.

Docs will still need some work in the future.

🚀 Features

• markers prop (string | AdvancedMapMarkerOptions)[]

Customize the markers displayed on the static map and the interactive map. Fully reactive.

<script lang="ts" setup>
const markers = [
	'-34.397,150.644', // provide a string as lng,lat 
   { position: { lng: -34.397, lat: 150.644 } } // OR provide an bject
]
</script>
<template>
  <ScriptGoogleMaps :markers="['-34.397,150.644', { position: { lng: -34.397, lat: 150.644 } }]" />
</template>

• centerMarker prop boolean

Controls whether a marker is placed at the center position.

⚠️ Breaking Changes

• options is renamed to mapOptions

  <ScriptGoogleMap
-    :options=""
+    :map-options=""
   />

• query is renamed to center, it's now recommended to use {longitude},{latitude} rather than a text query.

  <ScriptGoogleMap
-    :query=""
+    :center=""
   />

• The exposed internal API signature is now different.

<script lang="ts" setup>
const maps = ref()
onMounted(() => {
-  maps.value // google maps instance
+  maps.value // { googleMaps, map, createAdvancedMapMarker, resolveQueryToLatLang, importLibrary }
})
</script>
<template>
   <ScriptGoogleMap ref="maps" />
</template>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
scripts-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 7, 2024 6:40am
scripts-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 7, 2024 6:40am

[flashdesignory]

nit: can we link to the source, where the amounts are coming from?
This might get outdated as time goes by, maybe we could add a disclaimer along the lines: "The example cost is based on this source. Actual cost may change. For more accurate cost estimation, please visit ... "