Yandex Map Widget which loads the Map API and then creates a map with placemarks.
- Appends a script tag for the Map API to document body.
- Provides a promise that resolves when the script is loaded and the API is ready.
- After that you can create a map by just providing a list of points (see example below).
- You can create multiple maps on the same page if you want.
# npm
npm install yandex-map-widget
First, need to include the widget's CSS (see an code example below). It's possible to include the CSS in the widget's JS, but it's a bad design decision for maintability.
If yandex-map-widget.loadApi was called without args, default script src value would be "//api-maps.yandex.ru/2.1/?lang=ru_RU"
import 'yandex-map-widget/dist/yandex-map-widget.css';
import mapWidjet from 'yandex-map-widget';
mapWidjet.loadApi()
.then(() => {
mapWidjet.createMap('mymap',
[
{
name: 'Лесная поляна',
desc: 'место отдыха молодёжи',
lat: 54.934095,
lon: 43.305741,
address: 'Лесная, 21',
tel: '91659',
site: 'http://sarov.info'
},
{
name: 'Берёзовая роща',
desc: 'парк',
lat: 54.948128,
lon: 43.331607,
address: 'Берёзовая, 6',
tel: '97527',
site: 'https://sarov-itc.ru'
},
{
name: 'Улица коммунистов',
desc: 'историческое место',
lat: 54.916773,
lon: 43.337682,
address: 'Шверника, 9',
tel: '69091',
site: 'http://sarov.net/news'
}
]);
})
.catch(error => console.error(error));To use another language simply pass a valid src to yandex-map-widget.loadApi
mapWidjet.loadApi('https://api-maps.yandex.ru/2.1/?lang=en_US').then(() => { /* ... */ })# with npm
npm test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent