vue-google-maps

Vue-2 port of vue-google-maps

Attention!

Installation

With npm (Recommended)

npm install vue2-google-maps

Manually

Basic usage / Documentation

Get an API key from Google

Quickstart (Webpack, Nuxt):

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

importVuefrom'vue'import*asVueGoogleMapsfrom'vue2-google-maps'Vue.use(VueGoogleMaps,{load:{key:'YOUR_API_TOKEN',libraries:'places',// This is required if you use the Autocomplete plugin// OR: libraries: 'places,drawing'// OR: libraries: 'places,drawing,visualization'// (as you require)//// If you want to set the version, you can do so:// v: '3.26',},//// If you intend to programmatically custom event listener code//// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)//// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)//// you might need to turn this on.// autobindAllEvents: false,//// If you want to manually install components, e.g.//// import {GmapMarker} from 'vue2-google-maps/src/components/marker'//// Vue.component('GmapMarker', GmapMarker)//// then set installComponents to 'false'.//// If you want to automatically install all the components this property must be set to 'true':installComponents:true})

<template><GmapMapref="mapRef"...></GmapMap></template><script>exportdefault {mounted () {// At this point, the child GmapMap has been mounted, but// its map has not been initialized.// Therefore we need to write mapRef.$mapPromise.then(() => ...)this.$refs.mapRef.$mapPromise.then((map)=> {map.panTo({lat:1.38, lng:103.80})    })  }}

<template>  <GmapMarkerref="myMarker":position="google && new google.maps.LatLng(1.38, 103.8)" /></template><script>import {gmapApi}from'vue2-google-maps'exportdefault {  computed: {    google: gmapApi  }}</script>

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

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

Nuxt.js config

import*asVueGoogleMapsfrom'~/node_modules/vue2-google-maps'

transpile:[/^vue2-google-maps($|\/)/]

Officially supported components:

importGmapClusterfrom'vue2-google-maps/dist/components/cluster'// replace src with dist if you have Babel issuesVue.component('GmapCluster',GmapCluster)

Autocomplete component

<gmap-autocompleteclass="introInput"><templatev-slot:input="slotProps"><v-text-fieldoutlinedprepend-inner-icon="place"placeholder="Location Of Event"ref="input"v-on:listeners="slotProps.listeners"v-on:attrs="slotProps.attrs"></v-text-field></template></gmap-autocomplete>

Adding your own components

// DirectionsRenderer.jsimport{MapElementFactory}from'vue2-google-maps'exportdefaultMapElementFactory({name:'directionsRenderer',ctr:()=>google.maps.DirectionsRenderer,//// The following is optional, but necessary if the constructor takes multiple arguments//// e.g. for GroundOverlay// ctrArgs: (options, otherProps) => [options],events:['directions_changed'],// Mapped Props will automatically set up//   this.$watch('propertyName', (v) => instance.setPropertyName(v))//// If you specify `twoWay`, then it also sets up://   google.maps.event.addListener(instance, 'propertyName_changed', () => {//     this.$emit('propertyName_changed', instance.getPropertyName())//   })//// If you specify `noBind`, then neither will be set up. You should manually// create your watchers in `afterCreate()`.mappedProps:{routeIndex:{type:Number},options:{type:Object},panel:{},directions:{type:Object},//// If you have a property that comes with a `_changed` event,//// you can specify `twoWay` to automatically bind the event, e.g. Map's `zoom`:// zoom: {type: Number, twoWay: true}},// Any other properties you want to bind. Note: Must be in Object notationprops:{},// Actions you want to perform before creating the object instance using the// provided constructor (for example, you can modify the `options` object).// If you return a promise, execution will suspend until the promise resolvesbeforeCreate(options){},// Actions to perform after creating the object instance.afterCreate(directionsRendererInstance){},})

<template>  <GmapMap:zoom="...":center="...">    <DirectionsRenderer />  </GmapMap></template><script>importDirectionsRendererfrom'./DirectionsRenderer.js'exportdefault {  components: {DirectionsRenderer}}</script>

Testing