Google Map Components Vue 3 is a set of mostly used Google Map components for Vue.js.

google maps component api, vue google maps example, vue material google map, components of map, google maps web component

How to make use of it:

Install and download:

# NPM
$ npm i @fawmi/vue-google-maps

1. Install and import components.

import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps'

2. Create a new application instance and enter your Google Maps API key.

const app = createApp(App);
app.use(VueGoogleMaps, {
  load: {
    key: 'API KEY HERE',
  },
}).mount('#app')

3. Add a Google Map to the template.

<GMapMap />

// Props for map component
center: {
  required: true,
  twoWay: true,
  type: Object,
  noBind: true,
},
zoom: {
  required: false,
  twoWay: true,
  type: Number,
  noBind: true,
},
heading: {
  type: Number,
  twoWay: true,
},
mapTypeId: {
  twoWay: true,
  type: String,
},
tilt: {
  twoWay: true,
  type: Number,
},
options: { // Google Maps Options
  type: Object,
  default() {
    return {}
  },
},

4. Add a tag to Google Maps.

<GMapMarker
  :key="index"
  v-for="(m, index) in markers"
/>

export default {
  name: 'App',
  data() {
    return {
      markers: [
        {
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
      ]
    }
  },
}

// Props for marker component
animation: {
  twoWay: true,
  type: Number,
},
attribution: {
  type: Object,
},
clickable: {
  type: Boolean,
  twoWay: true,
  default: true,
},
cursor: {
  type: String,
  twoWay: true,
},
draggable: {
  type: Boolean,
  twoWay: true,
  default: false,
},
icon: {
  twoWay: true,
},
label: {},
opacity: {
  type: Number,
  default: 1,
},
options: {
  type: Object,
},
place: {
  type: Object,
},
position: {
  type: Object,
  twoWay: true,
},
shape: {
  type: Object,
  twoWay: true,
},
title: {
  type: String,
  twoWay: true,
},
zIndex: {
  type: Number,
  twoWay: true,
},
visible: {
  twoWay: true,
  default: true,
},

5. Add an info window to Google Maps.

<GMapMap>
  <GMapMarker
    :key="index"
    v-for="(m, index) in markers"
  >
    <GMapInfoWindow>
      <div>I am in info window <MyComponent/>
      </div>
    </GMapInfoWindow>
  </GMapMarker>
</GMapMap>

// Props for info window component
options: {
  type: Object,
  required: false,
  default() {
    return {}
  },
},
position: {
  type: Object,
  twoWay: true,
},
zIndex: {
  type: Number,
  twoWay: true,
},

6. Compile your tags.

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

export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
      markers: [
        {
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
        , // Along list of clusters
      ]
    }
  }
}

// Props for Cluster component
maxZoom: {
  type: Number,
  twoWay: false,
},
batchSizeIE: {
  type: Number,
  twoWay: false,
},
calculator: {
  type: Function,
  twoWay: false,
},
enableRetinaIcons: {
  type: Boolean,
  twoWay: false,
},
gridSize: {
  type: Number,
  twoWay: false,
},
ignoreHidden: {
  type: Boolean,
  twoWay: false,
},
imageExtension: {
  type: String,
  twoWay: false,
},
imagePath: {
  type: String,
  twoWay: false,
},
imageSizes: {
  type: Array,
  twoWay: false,
},
minimumClusterSize: {
  type: Number,
  twoWay: false,
},
styles: {
  type: Array,
  twoWay: false,
},
zoomOnClick: {
  type: Boolean,
  twoWay: false,
},

7. Add a circle to Google Maps.

<GMapMap
    :center="center"
    :zoom="6"
    map-type-id="terrain"
    style="width: 100vw; height: 100vh"
>
  <GMapCircle
      :key="city.id"
      v-for="city in germanCities"
      :radius="Math.sqrt(city.population) * 100"
      :center="{ lat: city.position.lat, lng: city.position.lng}"
  />
</GMapMap>

export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
      germanCities: [
        {
          id: 'duesseldorf',
          population: 612178,
          position: {
            lat: 51.233334, lng: 6.783333
          },
        },
        {
          id: 'koeln',
          position: {
            lat: 50.935173, lng: 6.953101
          },
          population: 1087863
        },
        {
          id: 'Hamburg',
          position: {
            lat: 53.551086,
            lng:  9.993682
          },
          population: 1899160
        }
      ]
    }
  },
}

// Props for Circle component
center: {
  type: Object,
  twoWay: true,
  required: true,
},
radius: {
  type: Number,
  twoWay: true,
},
draggable: {
  type: Boolean,
  default: false,
},
editable: {
  type: Boolean,
  default: false,
},
options: {
  type: Object,
  twoWay: false,
},

8. Add a polygon to Google Maps.

<GMapMap
    :center="center"
    :zoom="4"
    style="width: 100vw; height: 100vh"
>
  <GMapPolygon
      :paths="paths"
  />
</GMapMap>

export default {
  name: 'App',
  data() {
    return {
      center: {lat: 25.774, lng: -80.19},
      paths: [
        { lat: 25.774, lng: -80.19 },
        { lat: 18.466, lng: -66.118 },
        { lat: 32.321, lng: -64.757 },
      ],
    }
  },
}

// Props for Polygon component
draggable: {
  type: Boolean,
},
editable: {
  type: Boolean,
},
options: {
  type: Object,
},
path: {
  type: Array,
  twoWay: true,
  noBind: true,
},
paths: {
  type: Array,
  twoWay: true,
  noBind: true,
},

9. Add a rectangle to Google Maps.

<GMapMap
    :center="center"
    :zoom="4"
    style="width: 100vw; height: 100vh"
>
  <GMapRectangle
      :bounds="bounds"
  />
</GMapMap>

export default {
  name: 'App',
  data() {
    return {
      center: {lat: 33.685, lng: 33.671},
      bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
    }
  },
}

// Props for Rectangle component
bounds: {
  type: Object,
  twoWay: true,
},
draggable: {
  type: Boolean,
  default: false,
},
editable: {
  type: Boolean,
  default: false,
},
options: {
  type: Object,
  twoWay: false,
},

Reactive Vue 3 Components For Google Maps Plugin/Github

See Demo And Download

Official Website(fawmi): Click Here

This superior jQuery/javascript plugin is developed by fawmi. For extra Advanced usage, please go to the official website.