vue-google-maps - GitLite

KO | EN

gitlite — search

#javascript #ai #go #machine-learning #deep-learning #linux #nodejs #macos #awesome #vue #awesome-list #pytorch #security #openai

vue-google-maps

(★ 203)

Reactive Vue 3 components for Google maps

File Explorer

Download Latest Version (.zip)

- - bug_report.md
  - feature_request.md
- - codeql-analysis.yml
  - npm-publish.yml
- dependabot.yml
- - index.md
- .npmignore
- package-lock.json
- package.json
- - build.js
- - base.js
  - css.js
  - dev.js
  - prod.js
  - terserOptions.js
- - getLocalIP.js
  - logger.js
  - paths.js
  - resolveClientEnv.js
  - spinner.js
- project.config.js
- - autocomplete.vue
  - autocompleteImpl.js
  - build-component.js
  - circle.js
  - cluster.vue
  - heatmap.js
  - infoWindow.vue
  - map.vue
  - mapElementMixin.js
  - marker.vue
  - polygon.js
  - polyline.js
  - rectangle.js
- - bindEvents.js
  - bindProps.js
  - create-map-script.js
  - env.js
  - event.js
  - lazyValue.js
  - load-google-maps.js
  - mountableMixin.js
  - simulateArrowDown.js
  - string.js
  - TwoWayBindingWrapper.js
  - WatchPrimitiveProperties.js
- load-google-maps.js
- main.js
- - test-gmapApi.html
  - test-marker-with-infowindow.html
  - test-page-without-maps.html
  - test-plain-map.html
- - babel-transform.js
  - compile-standalone.js
  - test-common.js
- .eslintrc.json
- basic.js
- gmapApi-guard.js
- maps-not-loaded.js
- marker-with-infowindow.js
- test-all-examples.js
- index.d.ts
.browserslistrc
.editorconfig
.eslintrc.js
.eslintrc.json
.gitignore
.npmignore
.prettierrc.js
babel.config.js
build-copy.js
CONTRIBUTING.md
jsconfig.json
LICENSE
package-lock.json
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue 3 Google maps Components

Set of mostly used Google Maps components for Vue.js.

#### Why this library exists?
We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.

## Documentation
Checkout [vue-map.netlify.app](https://vue-map.netlify.app) for a detailed documentation or [codesandbox for an example](https://codesandbox.io/s/vue-3-google-maps-ygpr4?file=/src/main.js)

## Installation
You can install it using npm
```
npm install -S @fawmi/vue-google-maps
```

## Basic usage
You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).

### Configure Vue to use the Components

In your `main.js`

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

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

```
### Use it anywhere in your components

```vue
<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 100vw; height: 900px"
  >
  </GMapMap>
</template>

<script >
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
    }
  }
}
</script>
```
## Components

### Markers

If you need to add markers to the `Map`, add `GMapMarker` as child of `GMapMap` component.
```vue
<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
    <GMapMarker
        :key="marker.id"
        v-for="marker in markers"
        :position="marker.position"
    />
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
      markers: [
        {
          id: 'dfsldjl3r',
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
      ]
    }
  }
}
</script>
```

### Cluster
If you have too many markers, it is helpful to cluster markers. You can easily cluster markers by wrapping your markers with `GMapCluster` component.

```vue
<template>
  <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>
</template>
<script>
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
      ]
    }
  }
}
</script>
```

### Heatmap
If you need to add heatmap layer to the Map, add visualization library in load config and add GMapHeatmap as child of GMapMap component.

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

const app = createApp(App);
app.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY_COMES_HERE',
    libraries: "visualization"
  },
}).mount('#app')

```

```vue
<template>
  <GMapMap
    ref="myMapRef"
    :center="center"
    :zoom="zoom"
    style="width: 100%; height: 600px"
  >
    <GMapHeatmap :data="heatData"></GMapHeatmap>
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  setup() {
    const center = {lat: 52.2985593, lng: 104.2455337}
    const zoom = 12
    const myMapRef = ref();
    const heatData = ref([])

watch(myMapRef, googleMap => {
      if (googleMap) {
        googleMap.$mapPromise.then(map=> {
          heatData.value = [
            {location: new google.maps.LatLng({lat: 52.2985593, lng: 104.2455337})},
          ];
        })
      }
    });

return {
      center,
      zoom,
      heatData,
      myMapRef
    }
  },
}
</script>
```

Checkout docs for more component

## Access map object
If you want to access `google map` object, you can access it by getting ref of the map object.
```vue
<template>
  <GMapMap ref="myMapRef" />
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.myMapRef)
  }
}
</script>
```
### Map options
You can pass Map options using options property:

See [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) for a complete list of available options.
 ```vue
 <GMapMap
  :options="{
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: false,
    fullscreenControl: true,
    disableDefaultUi: false
  }"
>
</GMapMap>
```

## More components

Many other components are also supported. Checkout [docs](https://vue-map.netlify.app) for more.

## Nuxt 3 usage

First add `@fawmi/vue-google-maps` to `build.transpile` property in your `nuxt.config.ts`.

```ts
export default defineNuxtConfig({
  build: {
    transpile: ['@fawmi/vue-google-maps']
  },
})
 ```

Then create a plugin `~/plugin/vueGoogleMaps.ts`.

```ts
import { defineNuxtPlugin } from '#app'
import  VueGoogleMaps from '@fawmi/vue-google-maps'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGoogleMaps, {
    load: {
      key: 'YOUR_GOOGLE_API_KEY',
    },
  })
})
```

## Contributions
The best way to contribute is to report reproducible bugs, but feature requests and improvement suggestions are always welcome too. And definitely bug fixes and PR are welcome.