Build a Vue.js 3 Google Maps API to Embed Google Map & Add Markers Using vue3-google-map in TypeScript

App.vue

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

const center = { lat: 40.689247, lng: -74.044502 }
const zoom = 15

// Store markers in a ref to dynamically update them
const markers = ref([])

// Add a new marker at the clicked position
const addMarker = (event) => {
  const latLng = event.latLng
  markers.value.push({
    position: { lat: latLng.lat(), lng: latLng.lng() },
    label: 'New Marker',
    title: `Marker at ${latLng.lat()}, ${latLng.lng()}`,
  })
}
</script>

<template>
  <GoogleMap
    api-key="##yourownapikey##"
    style="width: 100%; height: 100vh"
    :center="center"
    :zoom="zoom"
    @click="addMarker"
  >
    <!-- Render all markers dynamically -->
    <Marker v-for="(marker, index) in markers" :key="index" :options="marker" />
  </GoogleMap>
</template>

import { ref } from 'vue'

import { GoogleMap, Marker } from 'vue3-google-map'

const center = { lat: 40.689247, lng: -74.044502 }

const zoom = 15

// Store markers in a ref to dynamically update them

const markers = ref([])

// Add a new marker at the clicked position

const addMarker = (event) => {

const latLng = event.latLng

markers.value.push({

position: { lat: latLng.lat(), lng: latLng.lng() },

label: 'New Marker',

title: `Marker at ${latLng.lat()}, ${latLng.lng()}`,

})

}

</script>

<GoogleMap

api-key="##yourownapikey##"

style="width: 100%; height: 100vh"

:center="center"

:zoom="zoom"

@click="addMarker"

</GoogleMap>

</template>

Build a Vue.js 3 Google Maps API to Embed Google Map & Add Markers Using vue3-google-map in TypeScript

Comments

Leave a Reply Cancel reply

Archives