Google Maps: Add option to disabled placeholder

[MickL]

🆒 Your use case

I would love to use the ScriptGoogleMaps component but I dont like the static placeholder. Instead I would like to immediately display the map.

🆕 The solution you'd like

Add a prop to disable the placeholder / static map feature entirely.

ℹ️ Additional info

Reasons:

• Static Map has a max resolution that is very low and therefor always looks blurry on high dpi screens
• Static Map cant be styled
• It takes some time until the scripts are loaded and the map is initialized. Therefor the "activate map on hover" doesnt work from a UX perspective

[harlan-zw]

You can request the Google Maps Static API for higher res images but yeh it is an annoying constraint.

I commented in the other issue, you should just override the slot.

<template>
  <ScriptGoogleMaps>
    <template #placeholder>
      <!-- show whatever you want -->
    </template>
  </ScriptGoogleMaps>
</template>

In terms of UX you should change the trigger for how the scripts loads on your app, if it's above the fold then loading immediately may make sense. It's hard to make something that will provide best UX use-case for everyone, it's defaulted to the most aggressive trigger at the moment given the weight of the scripts.

<template>
<ScriptGoogleMaps trigger="immediate">
</ScriptGoogleMaps>
</template>