[Примеры] Яндекс.Карты API (Yandex.Maps API)

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Подключаем API -->
    <!-- Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/load-docpage/ -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
<body>

<!-- Создаём контейнер для карты -->
<div id="map" style="width: 600px; height: 400px"></div>

<!-- Создаём карту -->
<script type="text/javascript">
    // Функция ymaps.ready() будет вызвана, когда
    // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
    ymaps.ready(init);

    function init(){
        // Создание карты.
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/
        var myMap = new ymaps.Map("map", {
            // Координаты центра карты.
            // Порядок по умолчнию: «широта, долгота».
            center: [55.76, 37.64],
            // Уровень масштабирования. Допустимые значения:
            // от 0 (весь мир) до 19.
            zoom: 12,
            // Элементы управления
            // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/
            controls: [

                'zoomControl', // Ползунок масштаба
                'rulerControl', // Линейка
                'routeButtonControl', // Панель маршрутизации
                'trafficControl', // Пробки
                'typeSelector', // Переключатель слоев карты
                'fullscreenControl', // Полноэкранный режим

                // Поисковая строка
                new ymaps.control.SearchControl({
                    options: {
                        // вид - поисковая строка
                        size: 'large',
                        // Включим возможность искать не только топонимы, но и организации.
                        provider: 'yandex#search'
                    }
                })

            ]
        });

        // Добавление метки
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/
        var myPlacemark = new ymaps.Placemark([55.76, 37.64], {
            // Хинт показывается при наведении мышкой на иконку метки.
            hintContent: 'Содержимое всплывающей подсказки',
            // Балун откроется при клике по метке.
            balloonContent: 'Содержимое балуна'
        });

        // После того как метка была создана, добавляем её на карту.
        myMap.geoObjects.add(myPlacemark);

    }
</script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<!DOCTYPE html>

<head>

</head>

<body>

// Функция ymaps.ready() будет вызвана, когда

// загрузятся все компоненты API, а также когда будет готово DOM-дерево.

ymaps.ready(init);

function init(){

// Создание карты.

// https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/

var myMap = new ymaps.Map("map", {

// Координаты центра карты.

// Порядок по умолчнию: «широта, долгота».

center: [55.76, 37.64],

// Уровень масштабирования. Допустимые значения:

// от 0 (весь мир) до 19.

zoom: 12,

// Элементы управления

// https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/

controls: [

'zoomControl', // Ползунок масштаба

'rulerControl', // Линейка

'routeButtonControl', // Панель маршрутизации

'trafficControl', // Пробки

'typeSelector', // Переключатель слоев карты

'fullscreenControl', // Полноэкранный режим

// Поисковая строка

new ymaps.control.SearchControl({

options: {

// вид - поисковая строка

size: 'large',

// Включим возможность искать не только топонимы, но и организации.

provider: 'yandex#search'

}

})

]

});

// Добавление метки

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/

var myPlacemark = new ymaps.Placemark([55.76, 37.64], {

// Хинт показывается при наведении мышкой на иконку метки.

hintContent: 'Содержимое всплывающей подсказки',

// Балун откроется при клике по метке.

balloonContent: 'Содержимое балуна'

});

// После того как метка была создана, добавляем её на карту.

myMap.geoObjects.add(myPlacemark);

}

</script>

</body>

</html>

ymaps.ready(init);
function init() {

    // Создание карты.
    var myMap = new ymaps.Map("map", {
        center: [56, 37],
        zoom: 12,
    });

    // Строка с адресом, который необходимо геокодировать
    var address = 'Москва, ул. Льва Толстого, 16';

    // Ищем координаты указанного адреса
    // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/geocode-docpage/
    var geocoder = ymaps.geocode(address);

    // После того, как поиск вернул результат, вызывается callback-функция
    geocoder.then(
        function (res) {

            // координаты объекта
            var coordinates = res.geoObjects.get(0).geometry.getCoordinates();

            // Добавление метки (Placemark) на карту
            var placemark = new ymaps.Placemark(
                coordinates, {
                    'hintContent': address,
                    'balloonContent': 'Время работы: Пн-Пт, с 9 до 20'
                }, {
                    'preset': 'islands#redDotIcon'
                }
            );

            myMap.geoObjects.add(placemark);
        }
    );

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

ymaps.ready(init);

function init() {

// Создание карты.

var myMap = new ymaps.Map("map", {

center: [56, 37],

zoom: 12,

});

// Строка с адресом, который необходимо геокодировать

var address = 'Москва, ул. Льва Толстого, 16';

// Ищем координаты указанного адреса

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/geocode-docpage/

var geocoder = ymaps.geocode(address);

// После того, как поиск вернул результат, вызывается callback-функция

geocoder.then(

function (res) {

// координаты объекта

var coordinates = res.geoObjects.get(0).geometry.getCoordinates();

// Добавление метки (Placemark) на карту

var placemark = new ymaps.Placemark(

coordinates, {

'hintContent': address,

'balloonContent': 'Время работы: Пн-Пт, с 9 до 20'

}, {

'preset': 'islands#redDotIcon'

}

);

myMap.geoObjects.add(placemark);

}

);

}

ymaps.ready(init);
function init() {

    var myMap = new ymaps.Map("map", {
        center: [56, 37],
        zoom: 8,
    });

    // Все виды меток
    // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/

    // Метка без содержимого с точкой в центре
    var placemark1 = new ymaps.Placemark([55.85616623021352, 36.66577266479298], {
        hintContent: 'Метка 1',
    }, {
        'preset': 'islands#nightDotIcon'
    });

    myMap.geoObjects.add(placemark1);

    // Метка в виде круга с точкой в центре
    var placemark2 = new ymaps.Placemark([55.843805428478326, 37.03381465698029], {
        hintContent: 'Метка 2',
    }, {
        'preset': 'islands#greenCircleDotIcon'
    });

    myMap.geoObjects.add(placemark2);

    // Метка с текстом
    var placemark3 = new ymaps.Placemark([55.85616623000242, 37.429322469480205], {
        hintContent: 'Метка 3',
        iconContent: 'Метка 3'
    }, {
        'preset': 'islands#yellowStretchyIcon'
    });

    myMap.geoObjects.add(placemark3);

    // Собственное изображение для метки с контентом
    var placemark4 = new ymaps.Placemark([55.79741725173239, 37.775391805417016], {
        hintContent: 'Собственный значок метки с контентом',
    }, {
        // Опции.

        // Необходимо указать данный тип макета.
        iconLayout: 'default#image',

        // Своё изображение иконки метки.
        iconImageHref: '//codd-wd.ru/wp-content/examples/pic/web-app-development-q32.png',
        // Размеры метки.
        iconImageSize: [32, 32],
        // Смещение левого верхнего угла иконки относительно
        // её "ножки" (точки привязки).
        iconImageOffset: [-16, -16],
    });

    myMap.geoObjects.add(placemark4);
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

ymaps.ready(init);

function init() {

var myMap = new ymaps.Map("map", {

center: [56, 37],

zoom: 8,

});

// Все виды меток

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/

// Метка без содержимого с точкой в центре

var placemark1 = new ymaps.Placemark([55.85616623021352, 36.66577266479298], {

hintContent: 'Метка 1',

}, {

'preset': 'islands#nightDotIcon'

});

myMap.geoObjects.add(placemark1);

// Метка в виде круга с точкой в центре

var placemark2 = new ymaps.Placemark([55.843805428478326, 37.03381465698029], {

hintContent: 'Метка 2',

}, {

'preset': 'islands#greenCircleDotIcon'

});

myMap.geoObjects.add(placemark2);

// Метка с текстом

var placemark3 = new ymaps.Placemark([55.85616623000242, 37.429322469480205], {

hintContent: 'Метка 3',

iconContent: 'Метка 3'

}, {

'preset': 'islands#yellowStretchyIcon'

});

myMap.geoObjects.add(placemark3);

// Собственное изображение для метки с контентом

var placemark4 = new ymaps.Placemark([55.79741725173239, 37.775391805417016], {

hintContent: 'Собственный значок метки с контентом',

}, {

// Опции.

// Необходимо указать данный тип макета.

iconLayout: 'default#image',

// Своё изображение иконки метки.

iconImageHref: '//codd-wd.ru/wp-content/examples/pic/web-app-development-q32.png',

// Размеры метки.

iconImageSize: [32, 32],

// Смещение левого верхнего угла иконки относительно

// её "ножки" (точки привязки).

iconImageOffset: [-16, -16],

});

myMap.geoObjects.add(placemark4);

}

myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){
    if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.
});

1

2

3

myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){

if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.

});

<div id="cityShop">
    <label for="cities">Город</label>:
    <select name="cities" id="cities"></select>
    <ul id="shops"></ul>
</div>

<div id="map" style="width: 100%; height: 300px"></div>

1

2

3

4

5

6

7

<label for="cities">Город</label>:

</div>

var myMap;
var placemarkCollections = {};
var placemarkList = {};

// Список городов и магазинов в них
var shopList = [
    {
        'cityName': 'Москва',
        'shops': [
            {'coordinates': [55.72532368326033, 37.748675112058876], 'name': 'Рязанский проспект, 6Ас21'},
            {'coordinates': [55.701677873469, 37.57358050756649], 'name': 'Ленинский проспект, 47с2'}
        ]
    },
    {
        'cityName': 'Санкт-Петербург',
        'shops': [
            {'coordinates': [59.863210042666125, 30.37903938671841], 'name': 'Будапештская улица, 36к2'},
            {'coordinates': [59.99486277158917, 30.406505207030918], 'name': 'проспект Непокорённых'}
        ]
    }
];

ymaps.ready(init);

function init() {

    // Создаем карту
    myMap = new ymaps.Map("map", {
        center: [56, 37],
        zoom: 8,
        controls: [
            'zoomControl'
        ],
        zoomMargin: [20]
    });

    for (var i = 0; i < shopList.length; i++) {

        // Добавляем название города в выпадающий список
        $('select#cities').append('<option value="' + i + '">' + shopList[i].cityName + '</option>');

        // Создаём коллекцию меток для города
        var cityCollection = new ymaps.GeoObjectCollection();

        for (var c = 0; c < shopList[i].shops.length; c++) {
            var shopInfo = shopList[i].shops[c];

            var shopPlacemark = new ymaps.Placemark(
                shopInfo.coordinates,
                {
                    hintContent: shopInfo.name,
                    balloonContent: shopInfo.name
                }
            );

            if (!placemarkList[i]) placemarkList[i] = {};
            placemarkList[i][c] = shopPlacemark;

            // Добавляем метку в коллекцию
            cityCollection.add(shopPlacemark);

        }

        placemarkCollections[i] = cityCollection;

        // Добавляем коллекцию на карту
        myMap.geoObjects.add(cityCollection);

    }

    $('select#cities').trigger('change');
}


// Переключение города
$(document).on('change', $('select#city'), function () {
    var cityId = $('select#cities').val();

    // Масштабируем и выравниваем карту так, чтобы были видны метки для выбранного города
    myMap.setBounds(placemarkCollections[cityId].getBounds(), {checkZoomRange:true}).then(function(){
        if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.
    });

    $('#shops').html('');
    for (var c = 0; c < shopList[cityId].shops.length; c++) {
        $('#shops').append('<li value="' + c + '">' + shopList[cityId].shops[c].name + '</li>');
    }

});

// Клик на адрес
$(document).on('click', '#shops li', function () {

    var cityId = $('select#cities').val();
    var shopId = $(this).val();

    placemarkList[cityId][shopId].events.fire('click');
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

var myMap;

var placemarkCollections = {};

var placemarkList = {};

// Список городов и магазинов в них

var shopList = [

{

'cityName': 'Москва',

'shops': [

{'coordinates': [55.72532368326033, 37.748675112058876], 'name': 'Рязанский проспект, 6Ас21'},

{'coordinates': [55.701677873469, 37.57358050756649], 'name': 'Ленинский проспект, 47с2'}

]

},

{

'cityName': 'Санкт-Петербург',

'shops': [

{'coordinates': [59.863210042666125, 30.37903938671841], 'name': 'Будапештская улица, 36к2'},

{'coordinates': [59.99486277158917, 30.406505207030918], 'name': 'проспект Непокорённых'}

]

}

];

ymaps.ready(init);

function init() {

// Создаем карту

myMap = new ymaps.Map("map", {

center: [56, 37],

zoom: 8,

controls: [

'zoomControl'

],

zoomMargin: [20]

});

for (var i = 0; i < shopList.length; i++) {

// Добавляем название города в выпадающий список

$('select#cities').append('<option value="' + i + '">' + shopList[i].cityName + '</option>');

// Создаём коллекцию меток для города

var cityCollection = new ymaps.GeoObjectCollection();

for (var c = 0; c < shopList[i].shops.length; c++) {

var shopInfo = shopList[i].shops[c];

var shopPlacemark = new ymaps.Placemark(

shopInfo.coordinates,

{

hintContent: shopInfo.name,

balloonContent: shopInfo.name

}

);

if (!placemarkList[i]) placemarkList[i] = {};

placemarkList[i][c] = shopPlacemark;

// Добавляем метку в коллекцию

cityCollection.add(shopPlacemark);

}

placemarkCollections[i] = cityCollection;

// Добавляем коллекцию на карту

myMap.geoObjects.add(cityCollection);

}

$('select#cities').trigger('change');

}

// Переключение города

$(document).on('change', $('select#city'), function () {

var cityId = $('select#cities').val();

// Масштабируем и выравниваем карту так, чтобы были видны метки для выбранного города

myMap.setBounds(placemarkCollections[cityId].getBounds(), {checkZoomRange:true}).then(function(){

if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.

});

$('#shops').html('');

for (var c = 0; c < shopList[cityId].shops.length; c++) {

$('#shops').append('<li value="' + c + '">' + shopList[cityId].shops[c].name + '</li>');

}

});

// Клик на адрес

$(document).on('click', '#shops li', function () {

var cityId = $('select#cities').val();

var shopId = $(this).val();

placemarkList[cityId][shopId].events.fire('click');

});

<span id="aw">Адрес: <span id="address"></span></span>
<div id="map" style="width: 100%; height: 400px"></div>

1 2	<span id="aw">Адрес: <span id="address"></span></span> <div id="map" style="width: 100%; height: 400px"></div>

ymaps.ready(init);
function init() {

    var myMap = new ymaps.Map("map", {
        center: [56, 37],
        zoom: 8
    });

    var geolocation = ymaps.geolocation;

    geolocation.get({
        // Выставляем опцию для определения положения по ip
        provider: 'yandex',
        // Карта автоматически отцентрируется по положению пользователя.
        mapStateAutoApply: true,
        // Включим автоматическое геокодирование результата.
        autoReverseGeocode: true
    }).then(function (result) {

        // Выведем результат геокодирования.
        myMap.geoObjects.add(result.geoObjects);

        var address = result.geoObjects.get(0).properties.get('text');
        document.getElementById('address').innerText = address;

        // Выведем в консоль результат геокодирования.
        console.log(result.geoObjects.get(0).properties.get('metaDataProperty'));

    });
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

ymaps.ready(init);

function init() {

var myMap = new ymaps.Map("map", {

center: [56, 37],

zoom: 8

});

var geolocation = ymaps.geolocation;

geolocation.get({

// Выставляем опцию для определения положения по ip

provider: 'yandex',

// Карта автоматически отцентрируется по положению пользователя.

mapStateAutoApply: true,

// Включим автоматическое геокодирование результата.

autoReverseGeocode: true

}).then(function (result) {

// Выведем результат геокодирования.

myMap.geoObjects.add(result.geoObjects);

var address = result.geoObjects.get(0).properties.get('text');

document.getElementById('address').innerText = address;

// Выведем в консоль результат геокодирования.

console.log(result.geoObjects.get(0).properties.get('metaDataProperty'));

});

}

/* Делаем карту чёрно-белой */
#map {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

1

2

3

4

5

/* Делаем карту чёрно-белой */

#map {

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */

-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */

}

// В бесплатной версии API Яндекс.Карт есть ограничение на 25000 запросов в сутки к геокодеру
// Подробнее https://tech.yandex.ru/maps/doc/enterprise/concepts/about-enterprise-docpage/

// Адрес, координаты которого необходимо получить
$address = 'Россия, Москва, Тверская 6с1';

// Отправляем запрос к геокодеру
if ( ! $geocode = @file_get_contents( 'http://geocode-maps.yandex.ru/1.x/?geocode=' . urlencode( $address ) ) ) {
	$error = error_get_last();
	throw new Exception( 'HTTP request failed. Error: ' . $error['message'] );
}

$xml = new SimpleXMLElement( $geocode );

$xml->registerXPathNamespace( 'ymaps', 'http://maps.yandex.ru/ymaps/1.x' );
$xml->registerXPathNamespace( 'gml', 'http://www.opengis.net/gml' );

$result = $xml->xpath( '/ymaps:ymaps/ymaps:GeoObjectCollection/gml:featureMember/ymaps:GeoObject/gml:Point/gml:pos' );

if ( isset( $result[0] ) ) {

	list( $longitude, $latitude ) = explode( ' ', $result[0] );

	echo $latitude; // Широта
	echo $longitude; // Долгота
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

// В бесплатной версии API Яндекс.Карт есть ограничение на 25000 запросов в сутки к геокодеру

// Подробнее https://tech.yandex.ru/maps/doc/enterprise/concepts/about-enterprise-docpage/

// Адрес, координаты которого необходимо получить

$address = 'Россия, Москва, Тверская 6с1';

// Отправляем запрос к геокодеру

if ( ! $geocode = @file_get_contents( 'http://geocode-maps.yandex.ru/1.x/?geocode=' . urlencode( $address ) ) ) {

$error = error_get_last();

throw new Exception( 'HTTP request failed. Error: ' . $error['message'] );

}

$xml = new SimpleXMLElement( $geocode );

$xml->registerXPathNamespace( 'ymaps', 'http://maps.yandex.ru/ymaps/1.x' );

$xml->registerXPathNamespace( 'gml', 'http://www.opengis.net/gml' );

$result = $xml->xpath( '/ymaps:ymaps/ymaps:GeoObjectCollection/gml:featureMember/ymaps:GeoObject/gml:Point/gml:pos' );

if ( isset( $result[0] ) ) {

list( $longitude, $latitude ) = explode( ' ', $result[0] );

echo $latitude; // Широта

echo $longitude; // Долгота

}

ymaps.ready(init);

function init(){
    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 12
    });

    // Отключаем scrollZoom
    // Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.behavior.Manager-docpage/#map.behavior.Manager__param-behaviors
    myMap.behaviors.disable('scrollZoom');

}

1

2

3

4

5

6

7

8

9

10

11

12

13

ymaps.ready(init);

function init(){

var myMap = new ymaps.Map("map", {

center: [55.76, 37.64],

zoom: 12

});

// Отключаем scrollZoom

// Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.behavior.Manager-docpage/#map.behavior.Manager__param-behaviors

myMap.behaviors.disable('scrollZoom');

}

ymaps.ready(init);

function init(){
    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 12,
        controls: [] // Убираем все элементы управления
    });
}

1

2

3

4

5

6

7

8

9

ymaps.ready(init);

function init(){

var myMap = new ymaps.Map("map", {

center: [55.76, 37.64],

zoom: 12,

controls: [] // Убираем все элементы управления

});

}

[Примеры] Яндекс.Карты API (Yandex.Maps API)

1. Подключение API, создание контейнера для карты и создание карты

2. Добавление метки по адресу с использованием геокодера

3. Стилизация меток

4. Масштабирование карты так, чтобы было видно все объекты

5. Добавление и переключение нескольких коллекций меток

6. Определение местоположения пользователя

7. Как изменить цветовую палитру Яндекс.Карты

8. Как получить координаты объекта на PHP

9. Как отключить scrollZoom на Яндекс.Карте

10. Как удалить все элементы управления на Яндекс.Карте