Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

github.com/GuillaumeLeclerc/vue-google-maps

Package Overview
Dependencies
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/GuillaumeLeclerc/vue-google-maps

Source
Go Modules
Version
v0.1.21
Version published
Created
Source

vue-google-maps

Demo:

Demo in production

Showcase with a lot of features

Presentation

If you want to write google map this way :

<map
  :center="{lat:10, lng:10}"
  :map-type-id="terrain"
  :zoom="7"
></map>

Or use the power of Vue.js within a google map like this:

<template>
  <map
    :center="center"
    :zoom="7"
  >
    <marker 
      v-for="m in markers"
      :position.sync="m.position"
      :clickable="true"
      :draggable="true"
      @g-click="center=m.position"
    ></marker>
  </map>
</template>

<script>
  import {load, Map, Marker} from 'vue-google-maps'
  
  load('YOUR_API_TOKEN','OPTIONAL VERSION NUMBER')
  
  export default {
    data () {
      return {
        center: {lat: 10.0, lng: 10.0},
        markers: [{
          position: {lat: 10.0, lng: 10.0}
        }, {
          position: {lat: 11.0, lng: 11.0}
        }]
      }
    }
  }
</script>

Example Project

You can see an project example here.

It uses webpack and vue-loader and was "forked" from the vue-loader-example project

Installation

With npm (Recommended)

npm install vue-google-maps

You can append --save or --save-dev to add it to your depency (if yor project also uses npm)

Manually

Just download the index.js file on the root directory of this repository

Basic usage

Reference vue-google-maps into your project

If you are using a cool bundler (recommended) you can just do :

import {load, Map, Marker} from 'vue-google-maps'

Or if you prefer the older ES5 syntax:

const VueGoogleMap = require('vue-google-maps')

Standalone / CDN

If you are not using any bundler (and you should feel bad). You can just reference the file in a script tag. The library will be available in a global object called VueGoogleMap. However you will need to include Vue and Lodash beforehand:

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<script src="dist/vue-google-maps.js"></script>

</head>
<body>

<google-map style="width: 100%; height: 100%; position: absolute; left:0; top:0"
    :center="{lat: 1.38, lng: 103.8}"
    :zoom="12"
>

</google-map>

<script>
VueGoogleMap.load({
    'key': 'YOUR_API_KEY',
})
Vue.component('google-map', VueGoogleMap.Map);
new Vue({
    el: 'body',
});

</script>

</body>

Set your api key

To enable any vue-google-maps components you need to set your api token:

load({
  key: 'YOUR_API_TOKEN',
  v: '3.24',                // Google Maps API version
  // libraries: 'places',   // If you want to use places input
})
// OR (depending on how you refereced it)
VueGoogleMap.load({ ... })

The parameters are passed in the query string to the Google Maps API, e.g. to set the version, libraries, or for localisation.

Full documentation

Note on events

All events are prefixed with g-. Example : g-click so it does not interfere with DOM events.

Documentation is up to date: take a look at the wiki

Sponsor

This component is sponsored by PapayaPods. Feel free to check out vue-google-maps in production !!

FAQs

Package last updated on 19 Sep 2016

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

2025 Report: Destructive Malware in Open Source Packages

Research

2025 Report: Destructive Malware in Open Source Packages

Destructive malware is rising across open source registries, using delays and kill switches to wipe code, break builds, and disrupt CI/CD.

By Kush Pandya  -  Dec 24, 2025
Spearphishing Campaign Abuses npm Registry to Target U.S. and Allied Manufacturing and Healthcare Organizations

Research

/

Security News

Spearphishing Campaign Abuses npm Registry to Target U.S. and Allied Manufacturing and Healthcare Organizations

A five-month operation turned 27 npm packages into durable hosting for browser-run lures that mimic document-sharing portals and Microsoft sign-in, targeting 25 organizations across manufacturing, industrial automation, plastics, and healthcare for credential theft.

By Nicholas Anderson, Kirill Boychenko  -  Dec 23, 2025