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 |