
Security News
PodRocket Podcast: Inside the Recent npm Supply Chain Attacks
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
@fawmi/vue-google-maps
Advanced tools
Set of mostly used Google Maps components for Vue.js.
We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.
Checkout https://vue-map.netlify.app for a detailed documentation
You can install it using npm
npm install -S @fawmi/vue-google-maps
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')
<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>
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
},
}
]
}
}
}
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>
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',
},
})
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
Google Map components for Vue.js 3
The npm package @fawmi/vue-google-maps receives a total of 16,142 weekly downloads. As such, @fawmi/vue-google-maps popularity was classified as popular.
We found that @fawmi/vue-google-maps demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.