Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

@fawmi/vue-google-maps

Package Overview
Dependencies
Maintainers
1
Versions
70
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fawmi/vue-google-maps

Google Map components for Vue.js 3

Source
npmnpm
Version
0.5.0
Version published
Weekly downloads
20K
7.43%
Maintainers
1
Weekly downloads
 
Created
Source

Google maps Components for Vue.js 3

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 https://vue-map.netlify.app for a detailed documentation

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 .

##Configure Vue to use the Components

In your main.js or inside a Nuxt plugin:

import { createApp } from 'vue'
import * as 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

<template>
  <GmapMap
      :center="{lat: 51.093048, lng: 6.842120}"
      :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>

Markers

If you need to gain access to the Map instance (e.g. to call panToBounds, panTo):

<template>
  <GmapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
    <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
    />
  </GmapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
      markers: [
        {
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
      ]
    }
  }
}

Cluster

If you have too many markers, it is helpfull to cluster markers. You can easily cluster maps by wrapping your markers with Cluster component.

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

If you need to gain access to the google object, you can access it by getting ref of the map object.

<template>
  <GmapMarker ref="myMarker"
    />
</template>
<script>
import {gmapApi} from 'vue2-google-maps'

export default {
  mounted() {
    console.log(this.$refs.myMarker)
  }
}
</script>

Map options

You can pass Map options using options property:

See MapOptions for a complete list of available options.

<GmapMap
 :options="{
   zoomControl: true,
   mapTypeControl: false,
   scaleControl: false,
   streetViewControl: false,
   rotateControl: false,
   fullscreenControl: true,
   disableDefaultUi: false
 }"
>
</GmapMap>

Add region and language localization:

Example for Localization:

Vue.use(VueGoogleMaps, {
  load: {
    region: 'VI',
    language: 'vi',
  },
})

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.

FAQs

Package last updated on 13 Feb 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts