Map

Description

This is the root element. You will have to put all vue-google-maps inside. otherwise they will not be displayed at all. This component represent the map itself

If the map is not displayed make sure you have loaded vue-google-maps with a valid API token.

Properties

• center (2w) : represent the center of the map and has this form : {lat: number, lng: number}
• bounds (2w) : represents the bounds of the map. To set the bounds, call the method fitBounds on the underlying map or on the Map component
• zoom (2w) : represents the zoom level of the google maps and must be a positive integer
• options (1w) : this is the standard ma option object. Don't forget there is vue binding on all properties. If you change it then the map will update automatically!
• heading (2w) : Not sure what it is (you should check the google maps documentation for this one
• mapTypeId (2w) : Represent the type of the map displayed. It can take multiple values and the four provided by google are : hybrid, terrain, roadmap and satellite. You can of course add yours. You will need access to the google object to do so. And you need google maps to be loaded in order to do this. You will need to import the loaded promise and then do loaded.then(function() { /* the google object is defined now */})

Javascript Object Properties

• vm.mapObject : represents the internal google.maps.Map object.
• vm.mapCreated : a promise that is resolved to the google.maps.Map object when it is created.

Events

The names are self explanatory, if you want more details you can go on the Google maps documentation these are just wrapper over them.

• g-bounds_changed
• g-click
• g-dblclick
• g-rightclick
• g-mousemove
• g-mouseout
• g-mouseover
• g-drag
• g-dragend
• g-dragstart
• g-idle
• g-resize
• g-tilesloaded

Callable Methods

Callable methods are a way to call methods on the underlying Google maps object. You can do it either by calling them on the map vue instance or sending an event g-methodName

• panBy
• panTo
• panToBounds
• fitBounds

Fore more information on how these methods works please refer to the google API reference

Allowed components as children

• Marker
• Cluster
• InfoWindow

All non vue-google-maps components will be displayed after the map if you put them inside the Map component

Examples

<map
  :center="{lat:0, lng:0}"
  @g-click="clicked++"
></map>