Как вставить карту Яндекса на сайт

Чтобы сайт искался на Яндекс.Картах, его нужно зарегистрировать в Яндекс.Справочнике.

Чтобы разместить фрагмент карты у себя на сайте, нужно заполнить пару полей в конструкторе [api.yandex.ru/maps]. Конструктор Яндекс карт Предполагаю, что лучше на HTML страницу установить код статической схемы, со ссылкой на Яндекс.Карты, поскольку скрипт может барахлить на устройствах с медленным интернетом. Конструктор Яндекс карт в виде изображения Результат:

Самарский академический театр драмы им. М. Горького
<div style="text-align: center;"><a href="ссылка_на_Яндекс_Карты" target="_blank"><img src="адрес_из_конструктора" alt="название_компании"/></a></div>

Режим панорамы также можно добавить к себе на сайт Как вставить панораму Яндекса на сайт Результат (содержимое можно вертеть, если захватить его участок мышкой, переходить по улицам щёлкая по стрелкам):

Советую посмотреть это видео для вдохновения:



Добавить карту на сайт: две картинки рядом (HTML / CSS)

Можно возле карты поставить изображение организации. При уменьшении окна браузера картинки будут уменьшаться пропорционально.

Как добраться к Самарскому академическому театру драмы им. М. Горького Самарский академический театр драмы им. М. Горького

<table id="table1"><tr>
<td><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=3sVszGantEAe0y_VfKbY0bKRginTKWsi&width=242&height=300" alt="Как добраться к Самарскому академическому театру драмы им. М. Горького"/></td>
<td><img src="http://3.bp.blogspot.com/-KRDixkPlXaQ/U2PkCGBI_JI/AAAAAAAAEYc/gsI1e8ktw_E/s624/samara-dram-teatr.jpg" alt="Самарский академический театр драмы им. М. Горького"/></td>
</tr></table>
Но я считаю так: пользователь ищет организацию и ему в первую очередь нужно узнать как до неё добраться. Поэтому лучше, если он увидит достаточного размера карту, чем мелкую карту и мелкое рядом стоящее фото здания. При уменьшении экрана максимально долго будет оставаться правая часть фонового изображения.
Самарский академический театр драмы им. М. Горького

<figure id="figure-right"><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=3sVszGantEAe0y_VfKbY0bKRginTKWsi&width=300&height=300" alt="Самарский академический театр драмы им. М. Горького"/></figure>
А здесь левая:
Самарский академический театр драмы им. М. Горького

<figure id="figure-left"><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=3sVszGantEAe0y_VfKbY0bKRginTKWsi&width=300&height=300" alt="Самарский академический театр драмы им. М. Горького"/></figure>
Если нужно, чтобы фотография перемещалась на новую строку, когда две картинки не умещаются вместе на текущей?
Мама́ев курган на карте ЯндексаСкульптура «Родина-мать зовёт!»

<figure id="figure-down-right"><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=DY8eBS0sa_ho7LNOXUBj9QjqBMiC8dA3&width=300&height=233" alt="Мама́ев курган на карте Яндекса"/><img src="http://1.bp.blogspot.com/-hmGBTV4UzwI/U2pcQDnKLtI/AAAAAAAAEYs/81ideAbrrPQ/s570/rodina-mat.jpg" alt="Скульптура «Родина-мать зовёт!»"/></figure>
И последнее, вставка карты поверх фото. Описание картинки будет находиться либо справа от изображения с адресом фирмы, либо под ним.
Мама́ев курган на карте ЯндексаСкульптура «Родина-мать зовёт!»
Скульптура «Родина-мать зовёт!»

<figure id="figure-down"><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=DY8eBS0sa_ho7LNOXUBj9QjqBMiC8dA3&amp;width=530&amp;height=358" alt="Мама́ев курган на карте Яндекса" id="izoaddress"><img src="http://4.bp.blogspot.com/-7f6hSStSMQw/U28c3-fWTSI/AAAAAAAAEZg/3KFey3SnKkA/s870/rodina-mat.jpg" alt="Скульптура «Родина-мать зовёт!»" id="izovid"><figcaption>Скульптура «Родина-мать зовёт!»</figcaption></figure>
в f t
наверх ↑

7 комментариев:

Бром
Блина ну кото так делает. Вы же рассказываете как сделать!!! Под рукой должен быть ваш примерник, а все ссылки без таржет бланк ((
NMitra
"Под рукой должен быть ваш примерник" - вы про API Яндекс.Карт? Каких именно примеров не хватает?
"все ссылки без таржет бланк" - это не всегда удобно в первую очередь для посетителя.
Штиф Васлер
А как сделать кнопку раскрытия карты на всю страницу? Как на озоне, например
http://www.ozon.ru/context/map/?areaId=2
(в верхнем правом углу)
NMitra
Через IP Карт ( https://tech.yandex.ru/maps/ ) - нужно разбираться в JavaScript, читать документацию, в интерфейсе представлены не все возможности Карт
Штиф Васлер
А Вы не знаете?
Штиф Васлер
о, нашел
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.Container-docpage/#enterFullscreen
только как использовать не понял еще
NMitra
Я не читала, не было необходимости