Vue 3 Google maps

# Marker

# Add marker to your components

With a marker, you can show specific locations on the map

<template>
  <GMapMap>
    <GMapMarker
      :key="index"
      v-for="(m, index) in markers"
    />
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      markers: [
        {
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
      ]
    }
  },
}
</script>

# Enable/Disable events

You can enable or disable map events by passing props.









 
 




<template>
  <GMapMap
    ref="myMarker"
  >
    <GMapMarker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      :clickable="true"
      :draggable="true"
    />
  </GMapMap>
</template>

# Register events

You can register events like click, the same as you do in your vue components









 





<template>
  <GMapMap
    ref="myMarker"
  >
    <GMapMarker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      @click="openInfoWindow(marker.id)"
      :clickable="true"
    />
  </GMapMap>
</template>

# Add custom icon

To use custom icon, pass :icon prop. You can pass a local resource or an image from internet.









 






<template>
  <GMapMap
    ref="myMarker"
  >
    <GMapMarker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      :icon="'https://developers.google.com/maps/documentation/javascript/examples/full/images/info-i_maps.png'"
      :clickable="true"
      :draggable="true"
    />
  </GMapMap>
</template>

Local resources can be passed in using require, for example: :icon="require('@/assets/images/place-icon.svg').default".

You can also pass an object to the icon prop to define custom size and label origin:









 
 
 
 
 






<template>
  <GMapMap
    ref="myMarker"
  >
    <GMapMarker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      :icon= '{
          url: "https://image.flaticon.com/teams/slug/google.jpg",
          scaledSize: {width: 77, height: 77},
          labelOrigin: {x: 16, y: -10}
      }'
      :clickable="true"
      :draggable="true"
    />
  </GMapMap>
</template>

← Info Window →