Vue-google-maps-ui : Google maps X Vue 3

image1

Install via npm

npm install vue-google-maps-ui --save

Install via yarn

yarn add vue-google-maps-ui

Import Component

Global Register

// main.js file
import GoogleMap from 'vue-google-maps-ui'
...
...

app.component('Googlemap', GoogleMap)

Locale Register For Options API


  <script>
    import GoogleMap from 'vue-google-maps-ui'

    export default {
      components: {
        GoogleMap
      }
    }
  </script>

Usage

<template>
  <Googlemap
    ...props
    ...events
  />
</template>

Props

<template>
  <Googlemap
    apiKey=""
    disabledSearch=""
    id=""
    inputClass=""
    width=""
    height=""
    drawingMode=""
    autocomplete=""
    currentAddress=""
    location=""
    language=""
    circles=""
    polygons=""
    polylines=""
    rectangles=""
    markers=""
    mapStyleOption=""
    loaderOptions=""
    drawingManagerOptions=""
    drawingControlOptions=""
  />
</template>

Events

<template>
  <Googlemap
    @change-address=""
    @update-circle=""
    @update-polygon=""
    @update-polyline=""
    @update-rectangle=""
    @update-marker=""
  />
</template>

image2

image3

Documentions