Reactive Vue 3 Components For Google Maps

Description:

A set of Reactive Vue.js 3 components for Google Maps.

Components Included:

Map
Marker
Info Window
Cluster
Circle
Polygon
Rectangle

How to use it:

1. Install and import components.

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

2. Create a new application instance and insert your own 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 marker 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. Cluster your markers.

<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,
},