Map

After installation, registration and plugged the component you can use <yandex-map> and work with a map. All parameters of the map are set via attributes. You can use map-was-initialized event to get an access to map instance (opens new window) for work directly with YandexMap API (opens new window). Link to the map instance will be transmitted as payload of event.

You can assign a class to parent element of map via attribute ymap-class. If this attribute is not specified the element will be assign an attribute style="width: 100%; height: 100%;".

All markers are added to the map via GeoObjectCollection by default, but if there is a huge count of markers, the map rendering will take a lof of time even when markers grouping to clusters. In this case, it is recommended to use ObjectManager and assign the attribute of map useObjectManager, but then you lose the opportunity to listen events by each marker.

The attributes coords, bounds and zoom are observable. The map is react if these attributes are changing.

Events

Event name	Payload
map-was-initialized	Link to map instance
actionend	map event
balloonclose
balloonopen
boundschange
click
contextmenu
dblclick
destroy
hintclose
hintopen
optionschange
sizechange
typechange

Attributes

Attribute	Type	Description
settings	Object	Settings of map. API Key, language and version.
coords	Array	Map center coordinates. [ lat, lng ]. May use with .sync. Required
map-events	Array	Native events, which map emits. If not provided, map will be emit all events, from section Events
zoom	Number	Zoom map value (from 0 to 19). May use with .sync. Default: 18.
bounds	Array	Coordinates of the left bottom and right top corners of the map. If defined, coords and center are ignored. May use with .sync.
cluster-options (opens new window)	Object	An object where the keys are the names of the clusters, and the values are the objects of options these clusters. In options you can point field layout (type String) for HTML template for balloonItemContentLayout, field clusterIconContentLayout (type String) for cluster icon customization and field clusterBalloonLayout (type String) for cluster balloon customization: Custom Balloon example (opens new window). There is also createCluster field for overriding default creating cluster function (field use-object-manager have to be turned off).
cluster-callbacks	Object	An object where the keys are the names of the clusters, and the values are the objects of events these clusters, e.g. { clusterName: { click: function() {...}, contextmenu: anotherFunction } }
behaviors (opens new window)	Array	Array of connected map behaviors. All other values are considered off.
controls (opens new window)	Array	Array of connected map controls. All other values are considered offth.
detailed-controls	Object	An object where the keys are the elements of map control, and the values are the objects of element settings. Designed for fine setting of control elements.
map-type	String	Map type. Valid values: map, satellite, hybrid. Default: map.
scroll-zoom	Boolean	Set false to disable map zoom on the page when you are scrolling. Default: true
placemarks	Array of Objects	Deprecated. Use marker component
use-object-manager	Boolean	Set true for use Object Manager. Used if there is huge count of markers on the map. Default: false
object-manager-clusterize	Boolean	Clustering with Object Manager. Default: true
ymap-class	String	Defines class for element, where rendering the map instance. If the attribute is not defined, the element uses style: width: 100%; height: 100%;
init-without-markers	Boolean	Set to false for prevent init and render map if there are no markers on the map. Default: true
show-all-markers	Boolean	Set to true to initialize map with all markers inside map bounds. Default: false
use-html-in-layout	Boolean	Set to true to define balloon properties as html. Default: false
options (opens new window)	Object	Map options.
balloon-component	Vue Component	Allow to use Vue Component as balloon. Need to activate runtimeCompiler (opens new window). Vue 2 only