
Research
/Security News
Weaponizing Discord for Command and Control Across npm, PyPI, and RubyGems.org
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
@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 15,261 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.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.