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