Guides
Example: Markers & Info Windows
Markers & Info Windows Demo
Click the red pin or green pin for an info window. Click the price tag for a custom popup.
<script setup lang="ts">
const showPopup = ref(false)
const greenPin = {
background: '#34a853',
borderColor: '#1e8e3e',
glyphColor: '#fff',
}
</script>
<template>
<ScriptGoogleMaps :center="{ lat: -33.8600, lng: 151.2100 }" :zoom="14">
<!-- Simple marker with info window -->
<ScriptGoogleMapsMarker :position="{ lat: -33.8568, lng: 151.2153 }">
<ScriptGoogleMapsInfoWindow>
<strong>Sydney Opera House</strong>
<p>Iconic performing arts venue</p>
</ScriptGoogleMapsInfoWindow>
</ScriptGoogleMapsMarker>
<!-- Colored pin -->
<ScriptGoogleMapsMarker :position="{ lat: -33.8523, lng: 151.2108 }">
<template #content>
<div class="w-6 h-6 rounded-full border-2" :style="{ background: greenPin.background, borderColor: greenPin.borderColor }" />
</template>
</ScriptGoogleMapsMarker>
<!-- Custom HTML marker with popup -->
<ScriptGoogleMapsMarker
:position="{ lat: -33.8688, lng: 151.2093 }"
@click="showPopup = !showPopup"
>
<template #content>
<div class="bg-blue-600 text-white px-2.5 py-1 rounded-full font-bold">
$1.2M
</div>
</template>
<ScriptGoogleMapsOverlayView
v-model:open="showPopup"
anchor="bottom-center"
:offset="{ x: 0, y: -40 }"
>
<div class="bg-white p-3 px-4 rounded-lg shadow-lg max-w-[200px]">
<strong>Town Hall</strong>
<p>3 bed, 2 bath apartment</p>
<button @click.stop="showPopup = false">
Close
</button>
</div>
</ScriptGoogleMapsOverlayView>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
Simple Markers
<template>
<ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
<ScriptGoogleMapsMarker
:position="{ lat: -33.8568, lng: 151.2153 }"
/>
<ScriptGoogleMapsMarker
:position="{ lat: -33.8688, lng: 151.2093 }"
/>
</ScriptGoogleMaps>
</template>
Colored Pins
Use the #content slot to customize the pin appearance.
<template>
<ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
<ScriptGoogleMapsMarker :position="{ lat: -33.8568, lng: 151.2153 }">
<template #content>
<div class="w-7 h-7 rounded-full border-2 bg-[#FF0000] border-[#CC0000]" />
</template>
</ScriptGoogleMapsMarker>
<ScriptGoogleMapsMarker :position="{ lat: -33.8688, lng: 151.2093 }">
<template #content>
<div class="w-6 h-6 rounded-full border-2 bg-[#4285F4] border-[#1a73e8]" />
</template>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
Custom HTML Markers
The #content slot replaces the default pin with any Vue template. Useful for price labels, avatars, or status indicators.
<template>
<ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
<ScriptGoogleMapsMarker
v-for="listing in listings"
:key="listing.id"
:position="listing.position"
>
<template #content>
<div class="bg-blue-600 text-white px-2.5 py-1 rounded-full font-bold text-sm whitespace-nowrap">
{{ listing.price }}
</div>
</template>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
Info Windows
ScriptGoogleMapsInfoWindow opens automatically when the parent marker is clicked.
<template>
<ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
<ScriptGoogleMapsMarker :position="{ lat: -33.8568, lng: 151.2153 }">
<ScriptGoogleMapsInfoWindow>
<h3>Sydney Opera House</h3>
<p>Iconic performing arts venue on Sydney Harbour.</p>
</ScriptGoogleMapsInfoWindow>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
Custom Popups with OverlayView
ScriptGoogleMapsOverlayView gives full control over popup HTML and styling, unlike InfoWindow which constrains your markup.
Use v-model:open to toggle visibility without remounting the component.
<script setup lang="ts">
const showPopup = ref(false)
</script>
<template>
<ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
<ScriptGoogleMapsMarker
:position="{ lat: -33.8688, lng: 151.2093 }"
@click="showPopup = !showPopup"
>
<ScriptGoogleMapsOverlayView
v-model:open="showPopup"
anchor="bottom-center"
:offset="{ x: 0, y: -50 }"
>
<div class="bg-white p-3 px-4 rounded-lg shadow-lg max-w-[200px]">
<p class="m-0 mb-2">
Any Vue content, fully styled.
</p>
<button @click.stop="showPopup = false">
Close
</button>
</div>
</ScriptGoogleMapsOverlayView>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
Dynamic Markers
Use v-for with a reactive array to add and remove markers dynamically.
<script setup lang="ts">
const markers = ref([
{ lat: -33.8568, lng: 151.2153 },
{ lat: -33.8688, lng: 151.2093 },
])
function addMarker() {
markers.value.push({
lat: -33.86 + Math.random() * 0.02,
lng: 151.20 + Math.random() * 0.02,
})
}
</script>
<template>
<ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
<ScriptGoogleMapsMarker
v-for="pos in markers"
:key="`${pos.lat},${pos.lng}`"
:position="pos"
/>
</ScriptGoogleMaps>
<button @click="addMarker">
Add Marker
</button>
</template>