Чтобы сайт искался на Яндекс.Картах, его нужно зарегистрировать в Яндекс.Справочнике.
Чтобы разместить фрагмент карты у себя на сайте, нужно заполнить пару полей в конструкторе [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&width=530&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>
7 комментариев:
"все ссылки без таржет бланк" - это не всегда удобно в первую очередь для посетителя.
http://www.ozon.ru/context/map/?areaId=2
(в верхнем правом углу)
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.Container-docpage/#enterFullscreen
только как использовать не понял еще