vue-yandex-maps

vue-yandex-maps

vue-yandex-maps is a plugin for vue.js that adds yandex-map custom element.

Install

npm install vue-yandex-maps --save

CommonJS

You can use any build tool which supports commonjs:

// register globally
var yandexMap =  require('vue-yandex-maps');
Vue.use(yandexMap)

// or for a single instance
var yandexMap = require('vue-yandex-maps');
new Vue({
  components: {yandexMap}
})

Or in ES2015:

// register globally
import yandexMap from 'vue-yandex-maps'
Vue.use(yandexMap)

// or for a single instance
import yandexMap from 'vue-yandex-maps'
new Vue({
  components: {yandexMap}
})

Direct include

You can use the CDN: https://unpkg.com/vue-yandex-maps, yandexMap is exposed to window and will automatically install itself. Also you can use your local copy:

<script src="../node_modules/vue-yandex-maps/vue-yandex-maps.js"></script>

Usage

Use tag to enable the map instance, and use attributes to define map options.

<yandex-map :latitude=54.62896654088406
            :longtitude=39.731893822753904
            :zoom=10
            :icon="{color: 'green', glyph: 'cinema'}"
            :balloon="{header: 'header', body: 'body', footer: 'footer'}"
            hint-content="Hint content 1"
            style="width: 600px; height: 600px;"></yandex-map>

Options

Option	Type	Description
latitude	Number	Latitude of map center. Required
longtitude	Number	Longtitude of map center. Required
zoom	Number	Zoom of map (from 0 to 19). Default value is 18.
hint-content	String	Tooltip content
balloon	Object	Balloon content object with three properties: header, body, footer
icon	Object	Icon object with three properties: color (default value is 'blue'), content, glyph. Glyph property have higher priority than content. List of colors and icons

License

MIT