<script setup>
import { GoogleMap, AdvancedMarker } from 'vue3-google-map'

const pinOptions = { background: '#FBBC04' }

function content(){
 const content = document.createElement("div")
 content.innerHtml = "<h3>Here's the HTML element</h3>"
 return content
}
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    mapId="DEMO_MAP_ID"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <AdvancedMarker :options="{ position: { lat: 40.689247, lng: -74.044502 }, content: content}" :pin-options="pinOptions"/>
  </GoogleMap>
</template>

<script setup>
import mapballon from './mapballon.vue'
import { GoogleMap, AdvancedMarker } from 'vue3-google-map'

const pinOptions = { background: '#FBBC04' }

function content(){
 // here's the code to return our mapballon.vue into HTMLElement
 return document.findElementbyId("mystyle")
}
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    mapId="DEMO_MAP_ID"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <mapballon id="mymapballon" /> <!-- This would load up the mapballon component so that we can use this element inside our function above -->
    <AdvancedMarker :options="{ position: { lat: 40.689247, lng: -74.044502 }, content: content}" :pin-options="pinOptions"/>
  </GoogleMap>
</template>

<script setup>
// your code here
</script>
<template>
 <div class="mystyle">
   <h3>Here's the HTML element</h3>
 </div>
</template>
<style scope>
.mystyle{
  background: white;
}
</style>