README

v-maps

A simple Google Maps component for Vue

Live Demo

Install

run:

yarn add v-maps

or:

npm install v-maps --save

Usage

Globally registration:

  import Vue from 'vue'
  import VMaps from 'v-maps'
  
  // { key: string, version?: string, libraries?: Array<string> }
  const googleApiOptions = { key: 'YOUR_GOOGLE_MAPS_API_KEY' }
  Vue.use(VMaps, googleApiOptions)

using global registration in component

<template>
  <v-map :center="{ lat: -23.4070511, lng: -51.9428867 }" />
</template>

using global registration map with markers

<template>
  <v-map :center="center">
    <v-marker :position="center" />
  </v-map>
</template>

<script>
  export default {
    computed: {
      center() {
        return { lat: -23.4070511, lng: -51.9428867 }
      }        
    }
  }
</script>

using global registration map with polygon

<template>
  <v-map :center="center">
    <v-polygon :paths="polygonPaths" />
  </v-map>
</template>

<script>
  export default {
    data() {
      return { polygonPaths: [] }
    },

    computed: {
      center() {
        return { lat: -23.4070511, lng: -51.9428867 }
      }        
    }
  }
</script>

using global registration map with polyline

<template>
  <v-map :center="center">
    <v-polyline :path="polylinePath" />
  </v-map>
</template>

<script>
  export default {
    data() {
      return { polylinePath: [] }
    },

    computed: {
      center() {
        return { lat: -23.4070511, lng: -51.9428867 }
      }        
    }
  }
</script>

Locally registration

<template>
  <v-map :center="center" api-key="YOUR_GOOGLE_MAPS_API_KEY">
    <v-marker :position="center" />
    <v-polygon :paths="polygonPaths" />
    <v-polyline :path="polylinePath" />
  </v-map>
</template>

<script>
  import { VMap, VMarker, VPolygon, VPolyline } from 'v-maps'

  export default {
    data() {
      return { polygonPaths: [], polylinePath: [] }
    },

    computed: {
      center() {
        return { lat: -23.4070511, lng: -51.9428867 }
      }        
    },
    components: { VMarker, VMap, VPolygon, VPolyline }
  }
</script>

Props

v-map

Property	Required	Type	Default	Description
center	yes	Object		The center position for map `{ lat: -45.2121, lng: -43.2131 }`
api-key	no	String		Your api key for google maps
api-options	no	Object	{}	Options to configure your google, libraries, version ...
zoom	no	Number	4	The zoom level
map-id	no	String	map	ID of the div on which the map will be mounted
options	no	Object	{}	Options for map (https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions)

v-marker

Property	Required	Type	Default	Description
position	yes	Object		The marker position `{ lat: -45.2121, lng: -43.2131 }`
options	no	Object	{}	Options for marker (https://developers.google.com/maps/documentation/javascript/markers)
info-window	no	String		Info view popup for marker (https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple)

v-polygon

Property	Required	Type	Default	Description
paths	yes	Array		Array of objects `[{ lat: -23.407056, lng: -51.9428867}]`
draggable	no	Boolean	false	Allows to drag polygon
editable	no	Boolean	false	Allows to edit polygon's vertexes
strokeColor	no	String	#00ff00	Polygon's stroke color
fillColor	no	String	#00ff00	Polygon's inner color
options	no	Object	{}	Other options for polygons (https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions)

v-polyline

Property	Required	Type	Default	Description
path	yes	Array		Array of objects `[{ lat: -23.407056, lng: -51.9428867}]`
draggable	no	Boolean	false	Allows to drag polyline
editable	no	Boolean	false	Allows to edit polyline's vertexes
strokeColor	no	String	#00ff00	Polyne's stroke color
options	no	Object	{}	Other options for polyline (https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions)

v-heatmap

Important: To use the heat map it is necessary to include the visualization library when registering the library.

global:

  const googleApiOptions = { key: 'YOUR_GOOGLE_MAPS_API_KEY', libraries: ['visualization'] }
  Vue.use(VMaps, googleApiOptions)

or locally:

  <template>
    <v-map :center="center" api-key="YOUR_GOOGLE_MAPS_API_KEY" :apiOptions="{ libraries: ['visualization']}">
      <v-heatmap :points="points" />
    </v-map>
  </template>

Property	Required	Type	Default	Description
points	no	Array	[]	Array of objects `[{ lat: -23.407056, lng: -51.9428867, weight?: 2}]`
options	no	Object	{}	Other options for polyline (https://developers.google.com/maps/documentation/javascript/heatmaplayer?#overview)

Events

v-map(for more details check the google documentation in https://developers.google.com/maps/documentation/javascript/events)

Vue Event	Params	Native google map event
bounds-changed	map, event	bounds_changed
center-changed	map, event	center_changed
click	map, event	click
double-click	map, event	dblclick
drag	map, event	drag
drag-end	map, event	dragend
drag-start	map, event	dragstart
heading-changed	map, event	heading_changed
idle	map, event	idle
map-type-id-changed	map, event	maptypeid_changed
mouse-move	map, event	mousemove
mouse-out	map, event	mouseout
mouse-over	map, event	mouseover
projection-changed	map, event	projection_changed
resize	map, event	resize
right-click	map, event	rightclick
tiles-loaded	map, event	tilesloaded
tilt-changed	map, event	tilt_changed
zoom-changed	map, event	zoom-changed

v-marker

Vue Event Params Info

click None This only works if the marker has no info window
v-polygon

Vue Event Params Native google map event

path-changed Current paths of polygon
v-polyline

Vue Event Params Native google map event

path-changed Current paths of polyline

Usage no npm install needed!