МаркетингРазноеРазноеРазработка сайтов

Как добавить карту Google или Яндекс на свой сайт

    0

    Сейчас сложно найти сайт компании, у которых нету на сайте Google или Яндекс карты. Но, не каждый знает, как добавить её на свой сайт. В этой статье, мы подробно рассмотрим, как же добавить карту на сайт.

    Ну что приступим? Начнем с того как добавить Яндекс карту на сайт.
    Что нам потребуется:

    1. Продумать место, где будет наша карта на сайте.
    2. Доступ в админ-панель и на хостинг где лежит сайт.

    Содержание статьи:

    1. Найдем нашу компанию на карте Яндекс
    2. Получаем ссылку на добавление карты на сайт
    3. Найдем нашу компанию на Google maps
    4. Получаем ссылку на добавление карты на наш сайт
    5. Добавляем карту на сайт
    6. Заключение

    1. Найдем здание в котором находится наша компания на карте Яндекс

    Заходим в конструктор карт Яндекс и открывается следующая страница. Здесь нам необходимо написать адрес вашей компании и убедится что показывает именно тот номер дома, который вам необходим. Если все правильно, переходим к следующему шагу.

    Отлично! Мы нашли здание в котором находится наша организация на карте, давайте её украсим и добавим на сайт.

    1. Нам нужно написать название компании. Это всё придаст более красивый вид на Яндекс карте на нашем сайте.
    2. Мы можем выбрать цвет флажка, который показывает на здание нашего офиса. К сожалению свои цвета задать нельзя, только выбрать из предложенных.
    3. Так же, вы можете выбрать какую либо иконку для флажка на карте.

    Мы добавили все необходимое для нашей карты и теперь нажимаем “Сохранить и продолжить”.

    2. Получаем ссылку на добавление карты на сайт

    Мы настроили наш флажок на карте и теперь самое время перейти к получению ссылки для сайта. И так приступим:

    1. За ползунки мы можем менять размер карты (в дальнейшем я покажу, как менять размер карты, если выбранный вами через ползунки, не подошёл), выбираем подходящий нам и нажимаем “Получить код карты”.
    2. После того, как появилось окно “Код для сайта”, нажимаем на вкладку “iframe” и копируем текст, который в ней предложен.

    По скольку добавление яндекс карт на сайт имеет такой же процесс как и гугл карт, давайте сейчас рассмотрим, как получить ссылку на гугл карту, а далее добавим эти ссылки на сайт. Кому ненужна Google карта, тогда (кликайте сюда) и переходите сразу к процессу добавлению карты на сайт.

    3. Найдем здание в котором находится наша компания в Google картах

    Приступим! Переходим на сайт Google карты и пишем адрес где находится ваш офис в строку на которую указывает стрелка. Далее смотрим на карте, точно ли это то место, где находится ваша компания. Если да, то идем дальше.

    Нажимаем на 3 полоски в левом верхнем углу:

    Открывается меню слева и там выбираем “Ссылка/код”

    4.Получаем ссылку на Google карту для сайта

    После того когда мы нажмем, появится всплывающее окно “Поделиться” со ссылкой на нашу карту. Выбираем в этом окне “Встраивание карт”

    Затем мы выбираем необходимый размер карты для нашего сайта. Есть 4 варианта выбора: Маленькая, Средняя, Большая и Другой размер ( вы можете сами задать, необходимый вам размер карты ). И в заключении нажимаем копировать HTML.

    Заветная ссылка на Google карту получена. Давайте рассмотрим как же её вставить на наш сайт.

    5.Добавляем карту на сайт

    Ссылки на карты мы получили, теперь их надо добавить на наш сайт. Все достаточно просто. Просто берем ссылку и вставляем в нужное место на сайте. Для примера я вставлю ссылки в эту статью.

    Небольшой нюанс добавления карт на сайт с cms. При добавлении в cms wordpress и другие, нужно переключить поля. Если мы вставим в визуальный редактор, то карта не загрузится. Для этого нужно перейти во вкладку “текст” и вставить туда наш код, который мы скопировали.

    Что бы изменить размер карты и не переделывать её снова через Яндекса или Goolge мы можем сделать следующее:

    Сверху у нас представлен код карты Google, а чуть ниже код карты Яндекс. Для того что бы изменить размер карты нам нужно поменять значения в width и height (width – ширина, height – высота). Значение пишем в пикселях. Если хотим, что бы карта занимала все пространство по ширине, то просто напишет “width: 100%”.

    6.Заключение

    Теперь вы знаете, как добавить карту на сайт. Что не потерять статью, можете добавить её в закладки в своем браузере. Получилось ли у вас поставить карту свой сайт? Была ли полезна данная статья? Возникли вопросы? Пишите друзья в комментарии, всем с удовольствием отвечу!

    Почему вы прокрастинируете или не можете определиться?

    Предыдущая статья

    Оставить комментарий

    avatar
      Подписаться  
    Уведомление о