Большинству компаний полезно и даже необходимо размещать интерактивную карту на сайте, чтобы посетителям было удобнее вас найти. Это особенно актуально для больших городов: вашим клиентам будет намного легче сориентироваться, если они визуально увидят местоположение офиса, смогут продумать маршрут и рассчитать время на дорогу.
Добавить интерактивную карту на свой сайт позволяет, например, всемирно известная поисковая система Google. Сделать это можно с помощью бесплатного сервиса Google Maps .
Шаг 1. Получить код для установки карты Google на сайте
Итак, чтобы разместить интерактивную карту Google на своем сайте, в первую очередь нужно получить код карты с отметкой Вашей организации. Для этого на GoogleMaps введите адрес или название компании в строку поиска, либо вручную найдите необходимый дом на карте и установите метку кликом мыши.
Когда отметка на карте установлена, нажмите на значок меню рядом со строкой поиска.
В открывшемся списке меню выберите пункт «Ссылка/код».
В открывшемся окошке перейдите во вкладку «Код», выберите размер карты и скопируйте предложенный html-код.
Шаг 2. Как вставить код карты 2gis на сайт
Итак, код получен, осталось только разместить его на нужной странице сайта. Мы решили добавить карту в раздел «Контакты». Заходим в админку «Нубекса», на панели управления выбираем раздел «Страницы» , находим в списке нужный раздел и нажмимаем «Редактировать» .
Работать будем с текстовым блоком. Нажимаем кнопку «Источник» , чтобы перейти в режим редактирования кода. Вставляем в текстовое поле код, полученный на GoogleMaps, и сохраняем изменения.
Заходим на страницу «Контакты» нашего сайта и радуемся обновлениям!
Благодаря Google maps любой посетитель вашего сайта сможет увидеть местоположение организации, проложить маршрут на автомобиле, на общественном транспорте или пешком, а так же сохранить ваш адрес в своих заметках.
Кроме карт от Google, вы так же можете разместить на сайте карты от и 2gis , о них мы расскажем в соответствующих статьях.
Довольно часто при создании сайта возникает необходимость вставить на него карту, которая бы указывала местоположение Вашей организации. На самом деле, карта на сайте, это очень удобно: в первую очередь для Ваших пользователей. Они смогут сразу, не покидая Вашего ресурса, увидеть: как можно Вас найти, что находится поблизости и определить насколько далеко расположена Ваша организация от их местоположения. Не все знают, как вставить карту на сайт. А сделать это очень и очень просто!
В этой статье я расскажу и покажу Вам, как, буквально за несколько минут, Вы можете вставить карту с нужным местоположением на страницы Вашего сайта.
Как вставить карту на сайт
Итак, для вставки карты на сайт мы будем использовать сервис от Google.
1. Первое, что нам нужно сделать, это перейти на сайт Google-карты .
2. Сейчас, чтобы произвести все необходимые нам операции, нам лучше всего перейти к «Классическому интерфейсу».
Для того, чтобы это сделать, нажмите на иконку вопросительного знака в правом нижнем углу экрана.
Перед вами откроется небольшая выдвижная панель меню, в которой нужно выбрать «Классический интерфейс».
После этого появится еще одно всплывающее окно, где Вас попросят рассказать, почему Вы хотите пользоваться именно Классическим интерфейсом. Вы можете отметить галочкой один из пунктов, а можете не отмечать, а сразу нажать на голубую ссылку «Классический интерфейс» чуть ниже.
После этого Вы перейдете в классический интерфейс карт Google, где есть все необходимое нам для размещения карты на странице сайта.
3. Теперь в поле для ввода адреса введите необходимый адрес. Не забудьте, что нужно указать страну, город, улицу и дом, то есть полный адрес.
Как результат, Вы получите Ваше местоположение на карте, отмеченное красным маркером.
4. Теперь нам нужно получить код для вставки в нашу веб страницу, а также задать некоторые настройки.
Для того чтобы получить код вставки нам нужно нажать на иконку для получения ссылки или кода (она находится правее иконки с принтером).
5. Здесь нас интересует HTML-код для добавления на веб сайт (второе поле).
Также в этом коде Вы можете увидеть некоторые параметры, которые можно изменить. Это размеры карты, то есть ее высота и ширина. Также вы можете задать для карты рамку. По умолчанию значение рамки равно нулю, но Вы можете это изменить, поставив, например, единицу.
Если Вам необходимо, то поменяйте эти параметры, хотя Вы можете сделать это и из кода веб страницы. Если нет необходимости, то просто скопируйте весь код.
6. Теперь осталось лишь вставить скопированный код в то место Вашей веб страницы, где Вы хотите видеть карту.
Вы можете создать отдельный блок «div» специально для Вашей карты, который Вы в дальнейшем сможете стилизовать через файл таблицы стилей.
Я вставлю мою карту прямо здесь. Смотрите, как она будет выглядеть.
В итоге, пользователь увидит Ваше местоположение, отмеченное маркером. Он сможет передвигать карту, увеличивать и уменьшать ее масштаб.
Также над маркером будет выведено окошко с Вашим адресом. А внизу будет ссылка для просмотра карты в увеличенном масштабе.
Вот так, все очень просто, функционально и удобно.
Пользуйтесь на здоровье!
Буду рада, если этот урок окажется для Вас полезным. В качестве благодарности оставляйте свои комментарии и делитесь статьей при помощи кнопок социальных сетей, которые расположены чуть ниже.
Также подписывайтесь на обновление блога, если Вы еще не подписаны. Обещаю Вам много полезных материалов.
С Вами была Анна Котельникова.
Успехов Вам и до новых встреч.
Здравствуйте, эту статью хотелось бы начать с небольшой заметки.
Те, кто увлекается не только разработкой, но и продвижением сайтов знают, что требования к площадкам растут с каждым годом, поисковики стараются отсеивать мусорные страницы и оставлять максимально релевантные. Так просматривая последние конференции по продвижению коммерческих сайтов, заметил один похожий во всех случаях факт – это оформление страницы контактов. Прошли те времена, когда эта страница содержала только несколько телефонов и форму обратной связи. Сейчас нужно максимально информативно предоставлять контактные данный. В этом случае вам просто не обойтись без динамической карты расположения вашего офиса. Она стала неотъемлемой частью любой контактной страницы коммерческого сайта.
Яндекс предоставил разработчика собственное решение в этом направлении – а именно «Конструктор Яндекс карт», который позволяет вебмастерам без проблем добавить любую карту на свой сайт.
Итак, теперь перейдем непосредственно к действиям.
1.) Для начала переходим в сам конструктор карт — http://api.yandex.ru/maps/tools/constructor/.
Перед вами появиться карта и поле, где вы можете указать нужный вам адрес.
Вы можете создать карту проезда, даже без авторизации в Яндекс.
2.) Вводите нужный вам адрес, после чего вам высветлится подсказка с полным названием улицы, города и номера дома.
3.) После выбора адреса вы можете указать описание метки, а также выбрать ее цвет. Осле настроек нажимаем кнопку «Ok». И спускаемся вниз страницы.
5.) Копируем предоставленный код и вставляем в нужное нам место на сайте.
Несколько заметок
— данный метод вставки карты Яндекс на сайт подойдет для любых CMS: Joomla, Opencart, WordPress и прочих.
— часто, визуальный редактор, например в joomla, режет код. Так что работать со страницей контактов желательно без редактора. Либо вставлять карту проезда на сайт после всех визуальных правок.
Скопируйте код созданной карты в текстовый файл, и при правке страницы контактов, при искажении кода, вы всегда сможете его восстановить.
На этом сегодня все, в следующих статьях я продолжу выкладывать шпаргалки по технической работе с сайтами.
Если вы желаете вставить хорошую карту на сайт с указанием на ней месторасположения, например, вашего офиса, склада, то воспользуйтесь такими известными веб-инструментами, как карта для сайта от Яндекса или карта для сайта от Google .
В этой статье мы расскажем для чего и как вставить карту Яндекса на сайт.
Вот так, к примеру, выглядит карта Яндекса, которую мы вставили на сайте торгового центра. Она могла быть подробнее, с изображениями домов на схеме, но в данном случае важнее было указать месторасположение торгового центра относительно ближайших поселков, поэтому был выбран мелкий масштаб.
Для чего нужна карта на сайте?
Вы, возможно, улыбнетесь, прочитав этот, казалось бы, риторический вопрос. "Карта нужна, чтобы посетители знали, где мы находимся", - это простой ответ слишком прост для понимания роли карты особенно для коммерческого сайта. Вот некоторые важные аспекты наличия карты на сайте:
- Обратите особое внимание: наличие карты в значительной степени повышает степень доверия к вашей ресурсу. Визуальное отображение месторасположения компании, офиса, магазина, подсознательно раскрепощает потенциального клиента (избавляет от опасений, вроде: "а вдруг обманут и исчезнут?"), а значит увеличивает вероятность того, что посетитель сайта станет реальным вашим клиентом.
- Наличие интерактивной карты (в отличие от карты-изображения) позволяет пользователю лучше сориентироваться на местности, посмотреть ближайшее метро, автомобилистам - проверить маршрут на дальних подступах к объекту. Кроме того, интерактивная карта позволяет посмотреть на местность из космоса.
- Ну, и конечно же, карта на сайте нужна для того, чтобы посетители и клиенты сайта знали месторасположение вашего магазина, офиса, склада.
Как вставить карту Яндекса на сайт (пошаговая инструкция)
Следует воспользоваться конструктором API Яндекс.Карт .
В этой статье мы приводим примерную пошаговую инструкцию, которая, как мы надеемся, поможет вставить карту Яндекс на ваш сайт:
Шаг 1. Начальная настройка Яндекс карты для сайта:
- Откройте страницу конструктора Яндекс.Карт для сайта .
- Найдите на карте необходимое географическое место по адресу или вручную (с помощью масштабирования ползунком и перемещения карты мышью).
- Выберите удобный для работы масштаб. Окончательный масштаб лучше установить в конце работы. Рисовать будем метки на карте, линии (подъездные пути) и контуры зданий или территорий.
- Укажите в соответствующем поле название будущей карте.
- Перейдем к инструментарию сервиса: кнопки для рисования точек (меток на карте), линий, многоугольников (контуров) и размеров карты.
Шаг 2. Рисование на карте точек (меток):
- Кликаем по кнопке рисования точек.
- Ставим метку (точку) в нужном нам месте. Например, на здании вашего офиса. Карта для сайта от Яндекса позволяет вставить не одну, а несколько меток (к примеру, если у вас несколько магазинов, складов или офисов).
- Переходим к настройке свойств установленной метки (вставка текста, выбор цвета и т.п.).
Шаг 3. Настройка свойств установленной на карте метки:
- Кликаем непосредственно по нарисованной нами метке.
- В открывшемся окошке выбираем нужные нам свойства (цвет, номер метки на карте), пишем по желанию текст (в последствии текст будет виден пользователю при клике по метке).
- Любую метку можно удалить в соответствующем окошке свойств.
- Итак мы вставили на Яндекс-карте для сайта метку вашего офиса, настроили её свойства, теперь переходим к рисованию линий. К примеру, линии подъездного пути к офису.
Шаг 4. Рисование линий на карте:
- Кликаем по кнопке рисования линий.
- Кликая по карте, мы получаем ломаную линию любой траектории. Ею можно оконтурить любой обект или прочертить маршрут подъезда к объекту.
- Передвигая квадратные и круглые маркеры, можно редактировать форму линии.
- По аналогии с метками, если кликнуть по линии, появится окно свойств, в котором можно установить цвет, толщину, прозрачность линии, а так же внести текст, который будет показываться пользователю.
- Переходим теперь к рисованию многоугольников.
Шаг 5. Рисование многоугольников, заполненных цветом контуров:
- Кликаем по кнопке рисования многоугольников.
- В отличии от линий, которыми можно так же очертить любой многоугольник, данные многоугольники являются контурами с залитой цветом серединой.
- Кликая мышкой по карте можно нарисовать любой заполненный многоугольник. Методика рисования, редактирования и установка свойств аналогична методике рисования линий.
- Переходим теперь к изменению размеров карты.
Шаг 6. Изменение размеров карты для сайта:
- Кликаем по кнопке изменения размеров.
- Перемещая квадратные маркеры по контуру карты, можно изменить размер до необходимого. Всё просто.
- Переходим к финалу создания карты.
Шаг 7. Получение кода карты для сайта (Яндекс):
- Придаем карте окончательный вид, установив финальный масштаб карты и окончательную позицию (координаты).
- На этом этапе создание карты для сайта (Яндекс) можно считать законченным. Нажимаем на большую желтую кнопку "Сохранить и получить код".
- Даже после сохранения карты всегда можно вернуться к редактированию.
- Обратите внимание на то, что карта может быть не только схемой, но и фотоснимком из космоса, гибридом или элементом "Народной карты".
- Кроме того, вы вольны сделать карту интерактивной или простым изображением. Интерактивная карта интересней, функциональней, но может загружаться дольше простого изображения. Выбор за вами.
- Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.
Спасибо всем читателям, заинтересовавшимся нашей пошаговой инструкцией.
Создание карты для сайта от Яндекса - это нетрудоемкое, не требующее специальных знаний и навыков действие на фоне куда более сложных проблем сайтостроительства. Если при создании вашего сайта вы столкнулись с более серьёзными трудностями, обращайтесь к нам. Мы постараемся решить ваши проблемы!
Если вам понравилась наша инструкция, можете порекомендовать её своим друзьям и знакомым. "Социальные кнопки" находятся справа. Такова наша маленькая корысть .
