Guides

Example: Markers & Info Windows

Copy for LLMs
Google Maps Static Map
$1.2M
Markers & Info Windows Demo
Click the red pin or green pin for an info window. Click the price tag for a custom popup.

Simple Markers

<template>
  <ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
    <ScriptGoogleMapsAdvancedMarkerElement
      :position="{ lat: -33.8568, lng: 151.2153 }"
    />
    <ScriptGoogleMapsAdvancedMarkerElement
      :position="{ lat: -33.8688, lng: 151.2093 }"
    />
  </ScriptGoogleMaps>
</template>

Colored Pins

Use ScriptGoogleMapsPinElement to customize the pin appearance while keeping the standard shape.

<template>
  <ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
    <ScriptGoogleMapsAdvancedMarkerElement :position="{ lat: -33.8568, lng: 151.2153 }">
      <ScriptGoogleMapsPinElement
        :options="{ background: '#FF0000', borderColor: '#CC0000', glyphColor: '#FFFFFF', scale: 1.2 }"
      />
    </ScriptGoogleMapsAdvancedMarkerElement>
    <ScriptGoogleMapsAdvancedMarkerElement :position="{ lat: -33.8688, lng: 151.2093 }">
      <ScriptGoogleMapsPinElement
        :options="{ background: '#4285F4', borderColor: '#1a73e8', glyphColor: '#FFFFFF' }"
      />
    </ScriptGoogleMapsAdvancedMarkerElement>
  </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">
    <ScriptGoogleMapsAdvancedMarkerElement
      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>
    </ScriptGoogleMapsAdvancedMarkerElement>
  </ScriptGoogleMaps>
</template>

Info Windows

ScriptGoogleMapsInfoWindow opens automatically when the parent marker is clicked.

<template>
  <ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
    <ScriptGoogleMapsAdvancedMarkerElement :position="{ lat: -33.8568, lng: 151.2153 }">
      <ScriptGoogleMapsInfoWindow>
        <h3>Sydney Opera House</h3>
        <p>Iconic performing arts venue on Sydney Harbour.</p>
      </ScriptGoogleMapsInfoWindow>
    </ScriptGoogleMapsAdvancedMarkerElement>
  </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">
    <ScriptGoogleMapsAdvancedMarkerElement
      :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>
    </ScriptGoogleMapsAdvancedMarkerElement>
  </ScriptGoogleMaps>
</template>

Programmatic Markers

For imperative marker creation (dynamic data, external events), use the template ref API.

<script setup lang="ts">
const mapRef = ref()

async function addMarkerAtCenter() {
  const map = mapRef.value.map.value
  const center = map.getCenter()
  await mapRef.value.createAdvancedMapMarker({
    position: { lat: center.lat(), lng: center.lng() },
    title: 'Dynamic Marker',
  })
}
</script>

<template>
  <ScriptGoogleMaps ref="mapRef" :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="12" />
  <button @click="addMarkerAtCenter">
    Add Marker
  </button>
</template>
For most use cases, prefer the declarative ScriptGoogleMapsAdvancedMarkerElement component with v-for. The programmatic API is best when you need fine-grained control over marker lifecycle.
Edit this page
Markdown For LLMs

Map Styling

Google Maps supports two styling approaches: legacy JSON styles and cloud-based map IDs. Both work with Nuxt Scripts, including the static map placeholder.

Example: Shapes & Overlays