v3-gmaps Docs

Map (gmaps-map)

The Map is the core component of the library (and Google Maps). All the other components are created by placing them inside the Map component.

Simple Use (demo) 

<template>
  <div style="height: 500px">
    <gmaps-map />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { gmapsMap } from 'v3-gmaps';

export default defineComponent({
  components: { gmapsMap },
});
</script>

Props

PropsTypeDefaultDescription
options*GmapsMapOptions-Object used to define the properties of a gmaps-map.
centerGmapsPosition-The initial Map center.
clickableIconsbooleantrueWhether map points of interest are clickable.
headingnumber-The heading for aerial imagery in degrees measured clockwise from cardinal direction North.
mapTypeIdGmapsMapTypeIdROADMAPThe initial Map mapTypeId.
tiltnumber-Sets the angle of incidence of the map.
zoomnumber-The initial Map zoom level.
throttlenumber100The event throttle value in milliseconds.

* To see all of the possible options, have a look at the Google Maps MapOptions interface.

Events

EventTypeDescription
bounds_changedGmapsBoundsThis event is fired when the viewport bounds have changed.
center_changedGmapsPositionThis event is fired when the map center property changes.
clickGmapsPositionThis event is fired when the user clicks on the map.
contextmenuGmapsPositionThis event is fired when the DOM contextmenu event is fired on the map container.
dblclickGmapsPositionThis event is fired when the user double-clicks on the map.
drag-This event is repeatedly fired while the user drags the map.
dragend-This event is fired when the user stops dragging the map.
dragstart-This event is fired when the user starts dragging the map.
error*stringSpecial event if a the Map encountered an error. It returns the error message if there is one.
heading_changednumberThis event is fired when the map heading property changes.
idle-This event is fired when the map becomes idle after panning or zooming.
isfractionalzoomenabled_changednumberThis event is fired when the isFractionalZoomEnabled property has changed.
maptypeid_changedGmapsMapTypeIdThis event is fired when the mapTypeId property changes.
mountedgoogle.maps.MapOn mounted the component will emit the Google Maps object it represents.
mousemoveGmapsPositionThis event is fired whenever the user's mouse moves over the map container.
mouseoutGmapsPositionThis event is fired when the user's mouse exits the map container.
mouseoverGmapsPositionThis event is fired when the user's mouse enters the map container.
projection_changed-This event is fired when the projection has changed.
renderingtype_changed-This event is fired when the renderingType has changed.
rightclickGmapsPositionThis event is fired when the user right-clicks on the map.
tilesloaded-This event is fired when the visible tiles have finished loading.
tilt_changednumberThis event is fired when the map tilt property changes.
unmountedgoogle.maps.MapOn unmounted the component will emit the Google Maps object it represents.
zoom_changednumberThis event is fired when the map zoom property changes.

Notes

  • gmaps-map has most of the properties and events Google Maps' Map has.
  • The element that contains <gmaps-map /> should have a height and width style defined so that it can grow into it. If you can't see the map, that may be your problem.
  • Double clicking will result in both click and dblclick events firing (in that order).
  • The contextmenu even should be used instead of rightclick as it will accommodate Mac and mobile devices' methods of right clicking too.
  • To make demo's and tests simpler, a default object zoom is defaulted to 2 and center is defaulted to { lat: 0, lng: 0 } to simplify demo's and tests.
  • gmaps-map error event does not capture Google Maps errors - only those coming from Vue and/or the implementation. Things like invalid referrer errors are not able to be captured through this event.