[Vuejs]-How to display google map using vuejs

by

0👍

vue2-google-maps exposes components you can use for the map and markers

<template>
    <GmapMap
        :center="center"
        :zoom="14"
    >
        <GmapMarker
            :position="markerPosition"
        />
    </GmapMap>
</template>

<script>
export default {
    data () {
        return {
            center: {
                lat: 12.9716,
                lng: 77.5946
            },
            markerPosition: {
                lat: 12.9716,
                lng: 77.5946
            }
        }
    }
}
</script>

If you need access to the google object, vue2-google-maps recommends making a computed property.

<script>
import {gmapApi} from 'vue2-google-maps'

export default {
    computed: {
        google: gmapApi
    }
}
</script>

Leave a comment