Vue 3 Google Maps - Community Fork

# Map

Here is where you start. Here you will find some uses for Google Maps component:

# My first Google Maps component

You can create a Google Map component using GMapMap:

<!-- Notice that if no props are provided, the component will show an empty map component with default controls -->
<GMapMap :center="{ lat: 51.093048, lng: 6.84212 }" :zoom="7" />

Example on Playcode (opens new window)

# Styling your Google Maps component

You can generate custom map styles at https://mapstyle.withgoogle.com/ (opens new window).

You can provide custom styles by providing style property to the options prop:

<script setup>
  import { ref } from 'vue'

  const center = ref({ lat: 51.093048, lng: 6.84212 })
  const markers = ref([{ position: { lat: 51.093048, lng: 6.84212 } }])
</script>

<template>
  <GMapMap :center="center" :zoom="7" style="width: 500px; height: 300px">
    <GMapCluster :maxZoom="12">
      <GMapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center = m.position"
      />
    </GMapCluster>
  </GMapMap>
</template>

Example on Playcode (opens new window)

# Cloud-based styles with Map ID

You can manage your cloud-based styles on Google Maps Platform: Map Styles (opens new window), and your map ids on Google Maps Platform: Map Management (opens new window)

Documentation: Maps JavaScript API - Using Cloud-based maps styling (opens new window)

<template>
  <GMapMap
    :center="center"
    :options="options"
    :zoom="10"
    map-type-id="terrain"
    style="width: 100vw; height: 20rem"
  >
  </GMapMap>
</template>

<script>
  export default {
    data() {
      return {
        center: { lat: 51.093048, lng: 6.84212 },
        options: {
          mapId: 'xxx', //here comes your map id
        },
      }
    },
  }
</script>

# Disable UI elements

You can disable all UI components at once:

<GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" :disableDefaultUI="true" />

You can also disable specific UI components:

<GMapMap
  :center="{lat: 51.093048, lng: 6.842120}"
  :zoom="7"
  :options="{
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    rotateControl: true,
    fullscreenControl: true,
  }"
/>

# Max and Min Zoom

You can set the maximum and minimum zoom levels for the map:

<GMapMap
  :center="{lat: 51.093048, lng: 6.842120}"
  :zoom="7"
  :maxZoom="10"
  :minZoom="5" />
  • Max zoom specifies how far the user can zoom in, 18-20 is normally the max.
  • Min zoom is how far they can zoom out, 0-3 is normally the min.

# Access Google Maps instance

You can easily access the Map instance by accessing ref in your component:

<GMapMap
  :center="{ lat: 51.093048, lng: 6.84212 }"
  :zoom="7"
  ref="myMapRef"
  :disableDefaultUI="true"
/>

← Marker →