### Implement HeatmapLayer in Vue 3

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/heatmap-layer.md

Full example showing the setup of heatmap data and the GoogleMap component with the HeatmapLayer. Ensure the 'visualization' library is included in the GoogleMap props.

```vue
<script setup>
import { GoogleMap, HeatmapLayer } from 'vue3-google-map'

const sanFrancisco = { lat: 37.774546, lng: -122.433523 }

const heatmapData = [
  { location: { lat: 37.782, lng: -122.447 }, weight: 0.5 },
  { lat: 37.782, lng: -122.445 },
  { location: { lat: 37.782, lng: -122.443 }, weight: 2 },
  { location: { lat: 37.782, lng: -122.441 }, weight: 3 },
  { location: { lat: 37.782, lng: -122.439 }, weight: 2 },
  { lat: 37.782, lng: -122.437 },
  { location: { lat: 37.782, lng: -122.435 }, weight: 0.5 },

  { location: { lat: 37.785, lng: -122.447 }, weight: 3 },
  { location: { lat: 37.785, lng: -122.445 }, weight: 2 },
  { lat: 37.785, lng: -122.443 },
  { location: { lat: 37.785, lng: -122.441 }, weight: 0.5 },
  { lat: 37.785, lng: -122.439 },
  { lat: 37.785, lng: -122.437 }, weight: 2 },
  { location: { lat: 37.785, lng: -122.435 }, weight: 3 },
]
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    :libraries="['visualization']"
    style="width: 100%; height: 500px"
    :center="sanFrancisco"
    :zoom="13"
  >
    <HeatmapLayer :options="{ data: heatmapData }" />
  </GoogleMap>
</template>
```

```vue
<ClientOnly>
  <GoogleMap
    :api-promise="apiPromise"
    style="width: 100%; height: 500px"
    :center="sanFrancisco"
    :zoom="13"
  >
    <HeatmapLayer :options="{ data: heatmapData }" />
  </GoogleMap>
</ClientOnly>
```

--------------------------------

### Install vue3-google-map via package manager

Source: https://github.com/inocan-group/vue3-google-map/blob/main/README.md

Use npm or pnpm to add the library to your project dependencies.

```bash
npm install vue3-google-map
# OR
pnpm add vue3-google-map
```

--------------------------------

### Install vue3-google-map with NPM or Yarn

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/getting-started/index.md

Use NPM or Yarn to add the vue3-google-map package to your project dependencies.

```bash
npm install vue3-google-map
# OR
yarn add vue3-google-map
```

--------------------------------

### Using ClientOnly Wrapper

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/advanced-usage/index.md

Example of wrapping the GoogleMap component in ClientOnly to prevent SSR issues.

```vue
<ClientOnly>
  <GoogleMap
    ref="mapRef"
    :api-promise="apiPromise"
    class="map"
    :center="center"
    :zoom="2"
  />
  <label for="lng">Longitude</label>
  <input v-model.number="lng" id="lng" type="number" min="-180" max="180" step="10" />
</ClientOnly>
```

--------------------------------

### Basic Map with Marker

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/getting-started/index.md

This example demonstrates how to render a Google Map with a single marker. Ensure you replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key. The map is configured with a specific center and zoom level.

```vue
<script setup>
import { GoogleMap, Marker } from 'vue3-google-map'

const center = { lat: 40.689247, lng: -74.044502 }
</script>

<template>
  <GoogleMap
  api-key="YOUR_GOOGLE_MAPS_API_KEY"
  style="width: 100%; height: 500px"
  :center="center"
  :zoom="15"
  >
    <Marker :options="{ position: center }" />
  </GoogleMap>
</template>
```

```vue
<ClientOnly>
  <GoogleMap
    :api-promise="apiPromise"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <Marker :options="{ position: { lat: 40.689247, lng: -74.044502 } }" />
  </GoogleMap>
</ClientOnly>
```

--------------------------------

### Basic MarkerCluster Setup

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/marker-cluster.md

Demonstrates how to use the MarkerCluster component to group multiple Marker components within a GoogleMap. Ensure you have imported GoogleMap, Marker, and MarkerCluster.

```vue
<script setup>
import { GoogleMap, Marker, MarkerCluster } from 'vue3-google-map'

const center = { lat: -28.024, lng: 140.887 }

const locations = [
  { lat: -31.56391, lng: 147.154312 },
  { lat: -33.718234, lng: 150.363181 },
  { lat: -33.727111, lng: 150.371124 },
  { lat: -33.848588, lng: 151.209834 },
  { lat: -33.851702, lng: 151.216968 },
  { lat: -34.671264, lng: 150.863657 },
  { lat: -35.304724, lng: 148.662905 },
  { lat: -36.817685, lng: 175.699196 },
  { lat: -36.828611, lng: 175.790222 },
  { lat: -37.75, lng: 145.116667 },
  { lat: -37.759859, lng: 145.128708 },
  { lat: -37.765015, lng: 145.133858 },
  { lat: -37.770104, lng: 145.143299 },
  { lat: -37.7737, lng: 145.145187 },
  { lat: -37.774785, lng: 145.137978 },
  { lat: -37.819616, lng: 144.968119 },
  { lat: -38.330766, lng: 144.695692 },
  { lat: -39.927193, lng: 175.053218 },
  { lat: -41.330162, lng: 174.865694 },
  { lat: -42.734358, lng: 147.439506 },
  { lat: -42.734358, lng: 147.501315 },
  { lat: -42.735258, lng: 147.438 },
  { lat: -43.999792, lng: 170.463352 },
]
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="3"
  >
    <MarkerCluster>
      <Marker
        v-for="(location, i) in locations"
        :key="i"
        :options="{ position: location }"
      />
    </MarkerCluster>
  </GoogleMap>
</template>
```

--------------------------------

### Marker with ClientOnly Wrapper

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/marker.md

Example of using the Marker component within a ClientOnly wrapper to ensure client-side rendering.

```vue
<ClientOnly>
  <GoogleMap
    :api-promise="apiPromise"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <Marker :options="{ position: { lat: 40.689247, lng: -74.044502 }, label: 'L', title: 'LADY LIBERTY' }" />
  </GoogleMap>
</ClientOnly>
```

--------------------------------

### Implement CustomControl in Vue

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/custom-control.md

Demonstrates the basic setup of a CustomControl component within a GoogleMap, including the required props and slot usage.

```vue
<script setup>
import { GoogleMap, CustomControl } from 'vue3-google-map'

const center = { lat: 35, lng: -95 }
const sayHi = () => alert('Hi!')
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="13"
  >
    <CustomControl position="BOTTOM_CENTER">
      <button class="custom-btn" @click="sayHi">👋</button>
    </CustomControl>
  </GoogleMap>
</template>

<style scoped>
.custom-btn {
  box-sizing: border-box;
  background: white;
  height: 40px;
  width: 40px;
  border-radius: 2px;
  border: 0px;
  margin: 10px;
  padding: 0px;
  font-size: 1.25rem;
  text-transform: none;
  appearance: none;
  cursor: pointer;
  user-select: none;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  overflow: hidden;
}
</style>
```

```vue
<ClientOnly>
  <GoogleMap
    :api-promise="apiPromise"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="13"
  >
    <CustomControl position="BOTTOM_CENTER">
      <button class="custom-btn" @click="sayHi">👋</button>
    </CustomControl>
  </GoogleMap>
</ClientOnly>

<style scoped>
.custom-btn {
  box-sizing: border-box;
  background: white;
  height: 40px;
  width: 40px;
  border-radius: 2px;
  border: 0px;
  margin: 10px;
  padding: 0px;
  font-size: 1.25rem;
  text-transform: none;
  appearance: none;
  cursor: pointer;
  user-select: none;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  overflow: hidden;
}
</style>
```

--------------------------------

### AdvancedMarker with ClientOnly Wrapper

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/advanced-marker.md

Example of rendering AdvancedMarker components within a ClientOnly block using an external apiPromise.

```vue
<ClientOnly>
  <GoogleMap
    :api-promise="apiPromise"
    mapId="DEMO_MAP_ID"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <AdvancedMarker :options="{ position: { lat: 40.689247, lng: -74.044502 } }" :pin-options="{ background: '#FBBC04' }" />
    <AdvancedMarker :options="{ position: { lat: 40.689247, lng: -74.044502 } }">
      <template #content>
        <div style="background: white; color: black; padding: 5px; border-radius: 5px;">
          Custom Content
        </div>
      </template>
    </AdvancedMarker>
  </GoogleMap>
</ClientOnly>
```

--------------------------------

### Accessing Map Instance and API

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/advanced-usage/index.md

Demonstrates three patterns for interacting with the Google Maps API and map instance once the component is ready.

```vue
<script setup>
import { ref, computed, watch } from 'vue'
import { GoogleMap } from 'vue3-google-map'

const mapRef = ref(null)

// First pattern: compute some value using the API or map instance when "ready"
const markerIcon = computed(() => mapRef.value?.ready
  ? {
    url: /* icon image url */,
    scaledSize: new mapRef.value.api.Size(20, 20)
  }
  : null)

// Second pattern: watch for "ready" then do something with the API or map instance
watch(() => mapRef.value?.ready, (ready) => {
  if (!ready) return

  // do something with the api using `mapRef.value.api`
  // or with the map instance using `mapRef.value.map`
})
</script>

<template>
  <GoogleMap ref="mapRef">
    <template #default="{ ready, api, map, mapTilesLoaded }">
      <!-- Third pattern: Here you have access to the API and map instance.
      "ready" is a boolean that indicates when the Google Maps script
      has been loaded and the api and map instance are ready to be used -->
    </template>
  </GoogleMap>
</template>
```

--------------------------------

### Initialize a basic Google Map

Source: https://github.com/inocan-group/vue3-google-map/blob/main/README.md

Use the GoogleMap component with an API key and center coordinates to render a map with a marker.

```vue
<script setup>
import { GoogleMap, Marker } from 'vue3-google-map'

const center = { lat: 40.689247, lng: -74.044502 }
</script>

<template>
  <GoogleMap
  api-key="YOUR_GOOGLE_MAPS_API_KEY"
  style="width: 100%; height: 500px"
  :center="center"
  :zoom="15"
  >
    <Marker :options="{ position: center }" />
  </GoogleMap>
</template>
```

--------------------------------

### Accessing GoogleMap instance and API

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/advanced-usage/index.md

Demonstrates using a template ref to access the map instance and reactively pan the map when the API is ready.

```vue
<script setup>
import { ref, computed, watch } from 'vue'
import { GoogleMap } from '@lib'
import { apiPromise } from '@docs/shared'

const mapRef = ref(null)
const center = { lat: 0, lng: 0 }

const _lng = ref(0)
const lng = computed({
  get: () => _lng.value,
  set: v => {
    if (!Number.isFinite(v)) {
      _lng.value = 0
    } else if (v > 180) {
      _lng.value = 180
    } else if (v < -180) {
      _lng.value = -180
    } else {
      _lng.value = v
    }
  },
})

watch([() => mapRef.value?.ready, lng], ([ready, lng]) => {
  if (!ready)
    return

  mapRef.value.map.panTo({ lat: 0, lng })
})
</script>
```

--------------------------------

### Implement AdvancedMarker in Vue

Source: https://github.com/inocan-group/vue3-google-map/blob/main/README.md

Demonstrates using AdvancedMarker with options and custom slot content.

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

const center = { lat: 40.689247, lng: -74.044502 }
const markerOptions = { position: center, label: 'L', title: 'LADY LIBERTY' }
const pinOptions = { background: '#FBBC04' }
</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="markerOptions" :pin-options="pinOptions"/>
    <AdvancedMarker :options="markerOptions">
      <template #content>
        <div style="background: white; color: black; padding: 5px; border-radius: 5px">
          Custom Content
        </div>
      </template>
    </AdvancedMarker>
  </GoogleMap>
</template>
```

--------------------------------

### Implement AdvancedMarker with Options and Slots

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/advanced-marker.md

Configure markers using options props or custom HTML content via the content slot.

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

const center = { lat: 40.689247, lng: -74.044502 }
const markerOptions = { position: center, label: 'L', title: 'LADY LIBERTY' }
const pinOptions = { background: '#FBBC04' }
</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="markerOptions" :pin-options="pinOptions"/>
    <AdvancedMarker :options="markerOptions">
       <template #content>
         <div style="background: white; color: black; padding: 5px; border-radius: 5px">
          Custom Content
        </div>
       </template>
    </AdvancedMarker>
  </GoogleMap>
</template>
```

--------------------------------

### Display InfoWindow with Options

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/info-window.md

Use the InfoWindow component to display content in a popup window. Configure its position and content via the options prop or by passing content to the default slot.

```vue
<script setup>
import { GoogleMap, InfoWindow } from 'vue3-google-map'

const center = { lat: -33.9, lng: 151.1 }
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="10"
  >
    <InfoWindow :options="{ position: center, content: 'Hello World!' }" />
    <InfoWindow :options="{ position: { lat: center.lat, lng: 150.8 } }">
      Content passed through slot
    </InfoWindow>
  </GoogleMap>
</template>
```

```vue
<ClientOnly>
  <GoogleMap
    :api-promise="apiPromise"
    style="width: 100%; height: 500px"
    :center="{ lat: -33.9, lng: 151.1 }"
    :zoom="10"
  >
    <InfoWindow :options="{ position: { lat: -33.9, lng: 151.1 }, content: 'Hello World!' }" />
    <InfoWindow :options="{ position: { lat: -33.9, lng: 150.8 } }">
    Content passed through slot
    </InfoWindow>
  </GoogleMap>
</ClientOnly>
```

--------------------------------

### Implement CustomMarker with api-promise

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/custom-marker.md

Usage of the CustomMarker component using an api-promise for Google Maps initialization, wrapped in a ClientOnly component.

```vue
<ClientOnly>
  <GoogleMap
    :api-promise="apiPromise"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <CustomMarker :options="{ position: center, anchorPoint: 'BOTTOM_CENTER' }">
      <div style="text-align: center">
        <div style="font-size: 1.125rem">Vuejs Amsterdam</div>
        <img src="https://vuejs.org/images/logo.png" width="50" height="50" style="margin-top: 8px" />
      </div>
    </CustomMarker>
  </GoogleMap>
</ClientOnly>
```

--------------------------------

### Loading Google Maps API Externally

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/advanced-usage/index.md

Demonstrates how to manually load the Google Maps API using the apiPromise prop.

```vue
<script setup>
import { GoogleMap, Marker } from 'vue3-google-map';
import { setOptions, importLibrary } from '@googlemaps/js-api-loader';

setOptions({
  key: YOUR_GOOGLE_MAPS_API_KEY,
  v: 'weekly',
});

const apiPromise = Promise.all([
  importLibrary('maps'),
  importLibrary('places'),
]).then(() => window.google);

const center = { lat: 40.689247, lng: -74.044502 };
</script>

<template>
  <GoogleMap
    :api-promise="apiPromise"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <Marker :options="{ position: center }" />
  </GoogleMap>
</template>
```

--------------------------------

### Render Circles on a Map

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/circle.md

Demonstrates how to iterate over a dataset to render multiple Circle components within a GoogleMap. Requires the GoogleMap and Circle components from vue3-google-map.

```vue
<script setup>
import { GoogleMap, Circle } from 'vue3-google-map'

const center = { lat: 37.09, lng: -95.712 }
const cities = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
}

const circles = {}

for (const key in cities) {
  circles[key] = {
    center: cities[key].center,
    radius: Math.sqrt(cities[key].population) * 100,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
  }
}
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    mapTypeId="terrain"
    :center="center"
    :zoom="4"
  >
    <Circle v-for="circle in circles" :options="circle" />
  </GoogleMap>
</template>
```

--------------------------------

### Apply Default Map Themes

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/themes/index.md

Demonstrates how to bind a selected theme from a list to the GoogleMap component's styles prop.

```vue
<template>
  <GoogleMap api-key="YOUR_GOOGLE_MAPS_API_KEY" :center="center" :zoom="4" :styles="theme" />
  <label for="theme">Theme</label>
  <select v-model="theme" id="theme">
    <option value="">-- None --</option>
    <option v-for="theme in themes" :value="theme" :key="theme">{{ theme }}</option>
  </select>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { GoogleMap } from 'vue3-google-map'

export default defineComponent({
  components: { GoogleMap },
  setup() {
    const center = { lat: 39.50024, lng: -98.350891 }
    const themes = ['aubergine', 'dark', 'grey', 'minimal', 'retro', 'roadways', 'roadwaysMinimal', 'ultraLight']
    const theme = ref('')

    return { center, themes, theme }
  },
})
</script>

<style scoped>
select {
  width: 200px;
  margin-top: 20px;
  margin-left: 10px;
}
</style>
```

--------------------------------

### Configure External Loader for AdvancedMarker

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/advanced-marker.md

Include the 'marker' library when using an external loader to ensure AdvancedMarker functionality.

```js
import { setOptions, importLibrary } from '@googlemaps/js-api-loader';

setOptions({
  key: YOUR_GOOGLE_MAPS_API_KEY,
  v: 'weekly',
});

const apiPromise = Promise.all([
  importLibrary('maps'),
  importLibrary('marker'), // Required for AdvancedMarker component
]).then(() => window.google);
```

--------------------------------

### Listening to Map Events

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/advanced-usage/index.md

Shows how to bind event listeners to the GoogleMap component using the @event_name syntax.

```vue
<GoogleMap
  @zoom_changed="yourFunctionName"
/>
```

--------------------------------

### Implement CustomMarker Component

Source: https://context7.com/inocan-group/vue3-google-map/llms.txt

Use CustomMarker to render arbitrary HTML or Vue components as map markers. Ensure the GoogleMap component is properly configured with an API key.

```vue
<script setup>
import { GoogleMap, CustomMarker } from 'vue3-google-map'

const center = { lat: 52.36834, lng: 4.88635 }
const markers = [
  { position: center, label: 'Vue Amsterdam', image: 'https://vuejs.org/images/logo.png' },
  { position: { lat: 52.370, lng: 4.890 }, label: 'Custom Location', image: 'https://vuejs.org/images/logo.png' },
]
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <CustomMarker
      v-for="(marker, i) in markers"
      :key="i"
      :options="{
        position: marker.position,
        anchorPoint: 'BOTTOM_CENTER',
        offsetY: -10,
        zIndex: 100
      }"
      @click="() => console.log('Custom marker clicked:', marker.label)"
    >
      <div style="text-align: center; cursor: pointer;">
        <div style="font-size: 14px; font-weight: bold; background: white; padding: 4px 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
          {{ marker.label }}
        </div>
        <img :src="marker.image" width="40" height="40" style="margin-top: 4px" />
      </div>
    </CustomMarker>
  </GoogleMap>
</template>
```

--------------------------------

### Nest InfoWindow in AdvancedMarker

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/info-window.md

Demonstrates nesting InfoWindow inside AdvancedMarker components, including custom marker content using the #content slot.

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

  const center = { lat: -25.363, lng: 131.044 };

  const centerSydney = { lat: -33.873220, lng: 151.206176 };
  const makerOptionsSydney = { position: centerSydney, title: 'SYDNEY' };

  const centerPerth = { lat: -31.954877, lng: 115.860462 };
  const markerOptionsPerth = { position: centerPerth, title: 'PERTH' };
</script>

<template>
  <GoogleMap
    mapId="DEMO_MAP_ID"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="3"
  >
    <AdvancedMarker :options="makerOptionsSydney">
      <InfoWindow>
        <h1>Sydney</h1>
        <div>
          Default AdvancedMarker With Custom InfoWindow
        </div>
      </InfoWindow>
    </AdvancedMarker>

    <AdvancedMarker :options="markerOptionsPerth">
      <template #content>
        <div style="background: white; color: black; padding: 5px; border-radius: 5px">
          Perth
        </div>
      </template>
      <InfoWindow>
        <h1>Perth</h1>
        <div>
          Custom Content AdvancedMarker With Custom InfoWindow
        </div>
      </InfoWindow>
    </AdvancedMarker>
  </GoogleMap>
</template>
```

```vue
<ClientOnly>
  <GoogleMap
    :api-promise="apiPromise"
    mapId="DEMO_MAP_ID"
    style="width: 100%; height: 500px"
    :center="{ lat: -25.363, lng: 131.044 }"
    :zoom="3"
  >
    <AdvancedMarker :options="{ position: { lat: -33.873220, lng: 151.206176 }, title: 'SYDNEY' }">
      <InfoWindow>
        <h1>Sydney</h1>
        <div>
          Default AdvancedMarker With Custom InfoWindow
        </div>
      </InfoWindow>
    </AdvancedMarker>
    <AdvancedMarker :options="{ position: { lat: -31.954877, lng: 115.860462 }, title: 'PERTH' }">
      <template #content>
        <div style="background: white; color: black; padding: 5px; border-radius: 5px">
          Perth
        </div>
      </template>
      <InfoWindow>
        <h1>Perth</h1>
        <div>
          Custom Content AdvancedMarker With Custom InfoWindow
        </div>
      </InfoWindow>
    </AdvancedMarker>
  </GoogleMap>
</ClientOnly>
```

--------------------------------

### Controlling Map Center with Input

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/advanced-usage/index.md

Shows how to synchronize a map's center with an external input field using a computed property and a watcher.

```vue
<script setup>
import { ref, computed, watch } from 'vue'
import { GoogleMap } from 'vue3-google-map'

const mapRef = ref(null)
const center = { lat: 0, lng: 0 }

const _lng = ref(0)
const lng = computed({
  get: () => _lng.value,
  set: v => {
    if (!Number.isFinite(v)) {
      _lng.value = 0
    } else if (v > 180) {
      _lng.value = 180
    } else if (v < -180) {
      _lng.value = -180
    } else {
      _lng.value = v
    }
  },
})

watch([() => mapRef.value?.ready, lng], ([ready, lng]) => {
  if (!ready)
    return

  mapRef.value.map.panTo({ lat: 0, lng })
})
</script>

<template>
  <GoogleMap
    ref="mapRef"
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    class="map"
    :center="center"
    :zoom="2"
  />
  <label for="lng">Longitude</label>
  <input v-model.number="lng" id="lng" type="number" min="-180" max="180" step="10" />
</template>

<style scoped>
.map {
  position: relative;
  width: 100%;
  height: 500px;
}

.map::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: red;
}

label {
  font-weight: 500;
}

input[type='number'] {
  margin-top: 20px;
  margin-left: 10px;
  outline: 1px solid #ccc;
  border-radius: 4px;
}
</style>
```

--------------------------------

### Implement CustomMarker in Vue 3

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/custom-marker.md

Basic usage of the CustomMarker component within a GoogleMap, demonstrating how to pass custom HTML content via the default slot.

```vue
<script setup>
import { GoogleMap, CustomMarker } from 'vue3-google-map'

const center = { lat: 52.36834, lng: 4.88635 }
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <CustomMarker :options="{ position: center, anchorPoint: 'BOTTOM_CENTER' }">
      <div style="text-align: center">
        <div style="font-size: 1.125rem">Vuejs Amsterdam</div>
        <img src="https://vuejs.org/images/logo.png" width="50" height="50" style="margin-top: 8px" />
      </div>
    </CustomMarker>
  </GoogleMap>
</template>
```

--------------------------------

### Manage InfoWindow state with v-model

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/info-window.md

Uses v-model to programmatically control the visibility of the InfoWindow and react to state changes.

```vue
<script setup>
import { ref, watch } from 'vue';
import { GoogleMap, Marker, InfoWindow } from 'vue3-google-map';

const center = { lat: -25.363, lng: 131.044 };
const infowindow = ref(true); // Will be open when mounted

watch(infowindow, (v) => {
  alert('infowindow has been ' + (v ? 'opened' : 'closed'));
});
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="4"
  >
    <Marker :options="{ position: center }">
      <InfoWindow v-model="infowindow">
        <div id="content">This is the infowindow content</div>
      </InfoWindow>
    </Marker>
  </GoogleMap>
</template>
```

--------------------------------

### Initialize GoogleMap Component

Source: https://context7.com/inocan-group/vue3-google-map/llms.txt

The main container component for initializing the Google Maps API. It accepts API keys, map options, and event handlers. Access the map instance and API when the component is ready.

```vue
<script setup>
import { ref, watch } from 'vue'
import { GoogleMap, Marker } from 'vue3-google-map'

const mapRef = ref(null)
const center = { lat: 40.689247, lng: -74.044502 }

// Access map instance when ready
watch(() => mapRef.value?.ready, (ready) => {
  if (!ready) return
  // Access the Google Maps API
  const { map, api } = mapRef.value
  console.log('Map is ready:', map)
})
</script>

<template>
  <GoogleMap
    ref="mapRef"
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
    :disable-default-ui="false"
    :zoom-control="true"
    :map-type-control="true"
    gesture-handling="cooperative"
    @click="(e) => console.log('Map clicked:', e.latLng)"
    @zoom_changed="() => console.log('Zoom changed')"
    @idle="() => console.log('Map idle')"
  >
    <Marker :options="{ position: center }" />
  </GoogleMap>
</template>
```

--------------------------------

### Configure Marker with Options

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/marker.md

Pass a MarkerOptions object to the options prop to define marker position, labels, and titles.

```vue
<script setup>
import { GoogleMap, Marker } from 'vue3-google-map'

const center = { lat: 40.689247, lng: -74.044502 }
const markerOptions = { position: center, label: 'L', title: 'LADY LIBERTY' }
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <Marker :options="markerOptions" />
  </GoogleMap>
</template>
```

--------------------------------

### Display InfoWindow on Google Map

Source: https://github.com/inocan-group/vue3-google-map/blob/main/README.md

Use the `InfoWindow` component to display popup content at a specific map location. Content can be passed via the `options` prop or as a default slot. Multiple info windows can be displayed.

```vue
<script setup>
import { GoogleMap, InfoWindow } from 'vue3-google-map'

const center = { lat: -33.9, lng: 151.1 }
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="10"
  >
    <InfoWindow :options="{ position: center, content: 'Hello World!' }" />
    <InfoWindow :options="{ position: { lat: center.lat, lng: 150.8 } }">
      Content passed through slot
    </InfoWindow>
  </GoogleMap>
</template>
```

--------------------------------

### Use AdvancedMarker Component

Source: https://context7.com/inocan-group/vue3-google-map/llms.txt

The recommended marker component for placing markers on the map, supporting custom pin styling and HTML content. Requires a `mapId` on the parent `GoogleMap`. Use for new projects.

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

const center = { lat: 40.689247, lng: -74.044502 }
const markerOptions = { position: center, title: 'Statue of Liberty' }
const pinOptions = {
  background: '#FBBC04',
  borderColor: '#137333',
  glyphColor: 'white',
  scale: 1.2
}
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    map-id="DEMO_MAP_ID"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <!-- Basic marker with pin customization -->
    <AdvancedMarker
      :options="markerOptions"
      :pin-options="pinOptions"
      @click="() => console.log('Marker clicked')"
      @dragend="(e) => console.log('Dragged to:', e)"
    />

    <!-- Marker with custom HTML content -->
    <AdvancedMarker :options="{ position: { lat: 40.690, lng: -74.045 } }">
      <template #content>
        <div style="background: white; padding: 8px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.3)">
          <strong>Custom Content</strong>
          <p>Any HTML or Vue components</p>
        </div>
      </template>
    </AdvancedMarker>
  </GoogleMap>
</template>
```

--------------------------------

### Use InfoWindow with Marker

Source: https://github.com/inocan-group/vue3-google-map/blob/main/README.md

Nest the InfoWindow component inside a Marker to display it when the marker is clicked. Ensure you have imported the necessary components.

```vue
<script setup>
import { GoogleMap, Marker, InfoWindow } from 'vue3-google-map'

const center = { lat: -25.363, lng: 131.044 }
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="4"
  >
    <Marker :options="{ position: center }">
      <InfoWindow>
        <div id="content">
          <div id="siteNotice"></div>
          <h1 id="firstHeading" class="firstHeading">Uluru</h1>
          <div id="bodyContent">
            <p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large
            sandstone rock formation in the southern part of the
            Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi)
            south west of the nearest large town, Alice Springs; 450&#160;km
            (280&#160;mi) by road. Kata Tjuta and Uluru are the two major
            features of the Uluru - Kata Tjuta National Park. Uluru is
            sacred to the Pitjantjatjara and Yankunytjatjara, the
            Aboriginal people of the area. It has many springs, waterholes,
            rock caves and ancient paintings. Uluru is listed as a World
            Heritage Site.</p>
            <p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">
            https://en.wikipedia.org/w/index.php?title=Uluru</a>
            (last visited June 22, 2009).</p>
          </div>
        </div>
      </InfoWindow>
    </Marker>
  </GoogleMap>
</template>
```

--------------------------------

### Configure HeatmapLayer

Source: https://github.com/inocan-group/vue3-google-map/blob/main/README.md

Use the HeatmapLayer component to visualize data intensity. Ensure the 'visualization' library is included in the GoogleMap component's libraries prop.

```vue
<script setup>
import { GoogleMap, HeatmapLayer } from 'vue3-google-map'

const sanFrancisco = { lat: 37.774546, lng: -122.433523 }

const heatmapData = [
  { location: { lat: 37.782, lng: -122.447 }, weight: 0.5 },
  { lat: 37.782, lng: -122.445 },
  { location: { lat: 37.782, lng: -122.443 }, weight: 2 },
  { location: { lat: 37.782, lng: -122.441 }, weight: 3 },
  { location: { lat: 37.782, lng: -122.439 }, weight: 2 },
  { lat: 37.782, lng: -122.437 },
  { location: { lat: 37.782, lng: -122.435 }, weight: 0.5 },

  { location: { lat: 37.785, lng: -122.447 }, weight: 3 },
  { location: { lat: 37.785, lng: -122.445 }, weight: 2 },
  { lat: 37.785, lng: -122.443 },
  { location: { lat: 37.785, lng: -122.441 }, weight: 0.5 },
  { lat: 37.785, lng: -122.439 },
  { lat: 37.785, lng: -122.437 }, weight: 2 },
  { location: { lat: 37.785, lng: -122.435 }, weight: 3 },
]
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    :libraries="['visualization']"
    style="width: 100%; height: 500px"
    :center="sanFrancisco"
    :zoom="13"
  >
    <HeatmapLayer :options="{ data: heatmapData }" />
  </GoogleMap>
</template>
```

--------------------------------

### Configure and display a Rectangle component

Source: https://github.com/inocan-group/vue3-google-map/blob/main/docs/components/rectangle.md

Use the Rectangle component within a GoogleMap to render a shape defined by RectangleOptions. Ensure the GoogleMap component is properly configured with an API key or promise.

```vue
<script setup>
import { GoogleMap, Rectangle } from 'vue3-google-map'

const center = { lat: 33.678, lng: -116.243 }
const rectangle = {
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  bounds: {
    north: 33.685,
    south: 33.671,
    east: -116.234,
    west: -116.251,
  },
}
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    mapTypeId="terrain"
    :center="center"
    :zoom="11"
  >
    <Rectangle :options="rectangle" />
  </GoogleMap>
</template>
```