код карты гугл для сайта

Как вставить Гугл карту на сайт

код карты гугл для сайта. money birds728. код карты гугл для сайта фото. код карты гугл для сайта-money birds728. картинка код карты гугл для сайта. картинка money birds728. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

На самом деле, разместить карту на сайте, с отмеченным адресом, плевое дело. Однако, к сожалению, многие этого не делают. Да, если у вас просто блог, то карта навряд ли вам пригодится. Но если ваш сайт является представителем реально существующего офиса в оффлайне, то карта на сайте, просто необходима. И неважно, касается это офиса много миллиардной компании, или это всего лишь сайт местной мастерской. Давайте посмотрим, как разместить карту на вашем сайте или блоге.

В русскоязычной части интернета, наиболее популярны карты от двух компаний: Гугл и Яндекс. Не буду говорить, сервис какой компании лучше, но сегодня я расскажу про сервис от компании Гугл.

Как вставить Google карту на сайт.

Существует несколько способов, для того, чтобы вставить гугл карты на свой сайт, и не важно, работает сайт под CMS WordPress или просто на HTML.

Способ № 1.

Перейдем на сайт — google.com/maps и выберем нужный адрес в строке поиска.

код карты гугл для сайта. 1. код карты гугл для сайта фото. код карты гугл для сайта-1. картинка код карты гугл для сайта. картинка 1. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

Обратите внимание, у карты есть два режима, упрощенный и полный. Если вы попали на упрощенный вид, то нужно перейти на полный вид. Для этого нужно просто нажать на значок в правом нижнем углу.

После чего, нужно в левом меню, выбрать пункт – «Поделиться».

код карты гугл для сайта. 2. код карты гугл для сайта фото. код карты гугл для сайта-2. картинка код карты гугл для сайта. картинка 2. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

И выбрать пункт – «Код»

код карты гугл для сайта. 3. код карты гугл для сайта фото. код карты гугл для сайта-3. картинка код карты гугл для сайта. картинка 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

После чего, у вас сразу отобразится карта с несколькими настройками: масштаб и размер карты; маленький, средний, большой, пользовательский. После чего, вы нужно скопировать код.

код карты гугл для сайта. 4. код карты гугл для сайта фото. код карты гугл для сайта-4. картинка код карты гугл для сайта. картинка 4. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

И вставить его в нужное место на сайте. Обратите внимание, если сайт на WordPress, то для вставки кода, достаточно перевести редактор в режим текста, и вставить код в нужное место. Или же вставить код в боковой виджет.

код карты гугл для сайта. 5. код карты гугл для сайта фото. код карты гугл для сайта-5. картинка код карты гугл для сайта. картинка 5. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

И вот что получится.

код карты гугл для сайта. 6. код карты гугл для сайта фото. код карты гугл для сайта-6. картинка код карты гугл для сайта. картинка 6. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

Далее, посетитель сайта, уже сможет дальше изменить масштаб, проложить путь до нужной точки, сделать вид со спутника и так далее.

Способ № 2.

Хотя первый способ, очень простой и позволяет вставить карту Google на сайт буквально в пару кликов, давайте разберем второй способ.

Нужно перейти по адресу — www.google.ru/maps. А далее? Да все как в первом способе. Также выбираете нужное месторасположение, и выбираете код. Единственная разница – сам адрес. А так сервис полностью идентичен.

Подозреваю, что свои адреса для карт имеются для всех доменных зон, коих у Гугл совсем не мало.

Способ № 3.

Но есть и третий способ. Уж он-то отличается от первых двух. Различие – больше настроек. Давайте перейдем на него.

Вначале сервис вам скажет, что у вас нет карт. Что ж, нужно создать. Для этого, необходимо нажать на значок «+»

код карты гугл для сайта. 7. код карты гугл для сайта фото. код карты гугл для сайта-7. картинка код карты гугл для сайта. картинка 7. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

Здесь есть ряд дополнительных элементов: выбрать объекты, добавить маркер, нарисовать линию, добавить маршрут, измерить расстояние или площадь.

код карты гугл для сайта. 8. код карты гугл для сайта фото. код карты гугл для сайта-8. картинка код карты гугл для сайта. картинка 8. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

Вставив маркер в нужное место, можно вставить название места и его описание.

код карты гугл для сайта. 9. код карты гугл для сайта фото. код карты гугл для сайта-9. картинка код карты гугл для сайта. картинка 9. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

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

После этого, нужно нажать на кнопку – «Поделиться»

код карты гугл для сайта. 10. код карты гугл для сайта фото. код карты гугл для сайта-10. картинка код карты гугл для сайта. картинка 10. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

Добавить название и описание карты.

код карты гугл для сайта. 11. код карты гугл для сайта фото. код карты гугл для сайта-11. картинка код карты гугл для сайта. картинка 11. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

код карты гугл для сайта. 12. код карты гугл для сайта фото. код карты гугл для сайта-12. картинка код карты гугл для сайта. картинка 12. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

И сохранить изменения

код карты гугл для сайта. 13. код карты гугл для сайта фото. код карты гугл для сайта-13. картинка код карты гугл для сайта. картинка 13. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

Далее, нажав на три точки справа, выбрать «Добавить на сайт» в появившемся меню.

код карты гугл для сайта. 14. код карты гугл для сайта фото. код карты гугл для сайта-14. картинка код карты гугл для сайта. картинка 14. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

И теперь, можно вставить полученный код на сайт, при этом, можно сразу изменить размеры.

код карты гугл для сайта. 15. код карты гугл для сайта фото. код карты гугл для сайта-15. картинка код карты гугл для сайта. картинка 15. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

И вот что в результате получится

код карты гугл для сайта. 16. код карты гугл для сайта фото. код карты гугл для сайта-16. картинка код карты гугл для сайта. картинка 16. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

Таким образом, теперь вам не составит большого труда вставить на ваш сайт карту Гугл, и теперь, вашим клиентам, не придется искать ваш офис, как мне когда-то. И еще напомню. Эти методы, можно использовать на всех типах сайтах, будь это чистый HTML или же CMS, например WordPress.

Ну а если у вас есть вопросы, задавайте их в комментариях, и я обязательно на них отвечу.

Источник

Как‌ ‌добавить‌ ‌карту‌ ‌Google,‌ ‌Яндекс‌ ‌и‌ ‌2ГИС‌ ‌на‌ ‌ сайт:‌ ‌просто‌ ‌по‌ ‌шагам‌

код карты гугл для сайта. 8403. код карты гугл для сайта фото. код карты гугл для сайта-8403. картинка код карты гугл для сайта. картинка 8403. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

Если у вашей компании есть адрес, куда приходят клиенты, вы можете лишний раз позаботиться о них. Избавьте пользователей от необходимости копировать адрес, открывать карты и искать, где вы находитесь.

На сайт можно вставить карту Google, Яндекс или 2ГИС с нужной меткой, чтобы пользователи могли сразу понять, куда им предстоит ехать. И дольше оставались на сайте, рассматривая карту и увеличивая время визита, что важно для поведенческих факторов и SEO. 😉

В статье:

Выбрать можно любую карту, какая вам больше нравится.

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

Первый вариант: встроить Карту с уже существующей меткой

Откройте Яндекс.Карты, найдите компанию и скопируйте код для вставки:

Карта с меткой и информацией из Яндекс.Карт будет выглядеть так:

код карты гугл для сайта. 3b0fe1c497d771aa5bc00ad80fd9fbe1. код карты гугл для сайта фото. код карты гугл для сайта-3b0fe1c497d771aa5bc00ad80fd9fbe1. картинка код карты гугл для сайта. картинка 3b0fe1c497d771aa5bc00ad80fd9fbe1. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.Организация на карте Яндекса

Найдите нужный адрес.

В правом верхнем углу нажмите на кнопку с тремя точками, выберите Поделиться.

Выберите виджет с картой и скопируйте код для вставки. Можете сначала включить предпросмотр, чтобы увидеть, как она будет выглядеть.

Второй вариант: создать свою метку

Карта, которую мы сделали, выглядит так: у нее есть маркер с иконкой, которую мы выбрали, и отображается линия с пояснением для удобства.

код карты гугл для сайта. e02d36213c66ca0ca7c5b46f536756ba. код карты гугл для сайта фото. код карты гугл для сайта-e02d36213c66ca0ca7c5b46f536756ba. картинка код карты гугл для сайта. картинка e02d36213c66ca0ca7c5b46f536756ba. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.Карта, созданная в конструкторе Яндекса

Создание карты пошагово:

Найдите адрес, выберите цвет и вид маркера.

Сохраните метку и добавьте еще адреса, если вы хотите отметить несколько филиалов.

При желании добавьте линии и нарисуйте фигуры, чтобы сделать маршрут понятнее. Линии можно изменять по изгибам улиц.

Интерактивная полезнее, ее можно двигать и масштабировать. Для вставки на сайт советуем ее.

Статическая будет выглядеть как картинка, ее можно распечатывать.

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

Если выбрать «Растянуть по ширине», у карты появится параметр width = 100%, то есть потом при вставке карты на сайт она займет всю ширину блока.

У кода iframe есть ограничения: пользователь не сможет переключать виды карты, то есть доступен только вид Схема, и она будет отображаться только на крупных масштабах.

Код JavaScript можно модифицировать с помощью API: добавить панораму, маршруты, поиск. Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.

Если вам нужно поменять язык топонимов, измените параметр lang в скопированном коде. Сейчас там lang=ru_RU, но можно поставить другой язык с помощью кода языка в формате ISO 639-1 и кода региона в формате ISO 3166-1: uk_UA — украинский для Украины, tr_TR — турецкий для Турции. Для пользователей из России и Украины регион и язык подстроится под настройки паспорта пользователя.

Вставьте код с картой Яндекса на сайт через редактор страницы.

Как вставить Google карту на сайт

Первый вариант: вставить карту из Google Maps с существующей меткой

Откройте Google Maps, найдите компанию и скопируйте код для вставки:

Карта будет выглядеть так:

код карты гугл для сайта. 69fda738aaef04174240d3195c9ba21a. код карты гугл для сайта фото. код карты гугл для сайта-69fda738aaef04174240d3195c9ba21a. картинка код карты гугл для сайта. картинка 69fda738aaef04174240d3195c9ba21a. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.Карта с меткой организации из Google Maps

    Найдите компанию на картах, нажмите на «Поделиться».

    Нажмите «Встраивание карт» и выберите размер из предложенных или выберите «Другой размер» и укажите свои параметры.

    Скопируйте получившийся HTML-код и вставьте его в код своего сайта в то место, где вы хотите разместить карту.

    Второй вариант: создать свою метку в Google Maps

    Так выглядит созданная нами метка в режиме предпросмотра: на ней есть описание, которое мы ввели, фотография и информация из Google Maps.

    код карты гугл для сайта. f5de5252df42861177e49dcfe30ca3a0. код карты гугл для сайта фото. код карты гугл для сайта-f5de5252df42861177e49dcfe30ca3a0. картинка код карты гугл для сайта. картинка f5de5252df42861177e49dcfe30ca3a0. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.Карта с меткой компании

    Пошаговое создание метки на Google картах:

    Введите адрес или название компании.

    Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.

    Созданную карту вы можете посмотреть в Предпросмотре. Нажмите кнопку с тремя вертикальными точками и выберите «Добавить на сайт».

    Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.

    Как вставить карту 2ГИС на сайт

    Встроить карту через API

    Установить интерактивную карту 2ГИС можно через JS API — это версия API для простых задач.

    код карты гугл для сайта. a49d90da1e0241cffceff13393324132. код карты гугл для сайта фото. код карты гугл для сайта-a49d90da1e0241cffceff13393324132. картинка код карты гугл для сайта. картинка a49d90da1e0241cffceff13393324132. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.Карта 2ГИС

    Перейдите на страницу и выберите город.

    Найдите компанию по названию.

    Установите нужный размер карты в правом нижнем углу.

    Нажмите «Далее», прочитайте Лицензионное соглашение и примите условия.

    Нажмите «Получить код» и скопируйте его для вставки на сайт.

    Создать в Конструкторе карту со своими метками

    В 2ГИС есть бесплатный Конструктор карт, с его помощью можно создать карту со своей разметкой — добавить метки, описания, отобразить маршруты, графически выделить области.

    Пошагово как сделать карту в Конструкторе 2ГИС:

    Введите адрес и найдите нужное здание.

    Настройте цвет метки, введите название.

    Добавьте описание, можно вставить картинку с помощью разметки HTML или Markdown.

    С помощью линий и выделения областей помогите клиентам сориентироваться по маршруту.

    Выберите нужный размер карты.

    Скопируйте код для вставки на сайт или в мобильное приложение.

    Как настроить отложенную загрузку карты на сайте

    Карты громоздкие, они влияют на загрузку сайта и могут тормозить отображение страницы.

    Проверить скорость загрузки конкретной страницы можно в этом инструменте. Он бесплатно измеряет скорость загрузки в соответствии с показателем Google Core Web Vitals, оценивает разные этапы загрузки и дает рекомендации:

    код карты гугл для сайта. d1d3bca5ce5920c608496915c7d47a55. код карты гугл для сайта фото. код карты гугл для сайта-d1d3bca5ce5920c608496915c7d47a55. картинка код карты гугл для сайта. картинка d1d3bca5ce5920c608496915c7d47a55. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.Фрагмент проверки

    Минимизировать влияние карты на скорость загрузки страницы поможет отложенная или Lazy-load загрузка.

    Загрузка карты по доскроллу до нее

    Если карта находится внизу страницы далеко в футере или в поп-апе, можно настроить, чтобы она загружалась не сразу при переходе на страницу, а только когда пользователь до нее доскроллит.

    Пользователь Хабра iefedorov для этого советует изменить код карты, который Google предлагает вставить на сайт.

    Пример исходного кода:

    Его нужно изменить вот так:

    Браузер будет получать src = «», когда читателю понадобится карта.

    Пошаговая настройка lazy-loading карты от Максима Васяновича (MaxGraph):

    Загрузка карты после наведения курсора

    Другой пользователь Хабра Dionisvl предлагает такой способ оптимизировать карту Яндекса, чтобы она подгружалась только при наведении на нее курсора мыши.

    При создании карты в конструкторе Яндекса с использованием API-ключа получился примерно такой код:

    На сайте нужно написать контейнер для блока с картой:

    Также нужны стили для статичной картинки, подойдет скриншот.

    Нужен JavaScript-код, который будет отслеживать события — наведение курсора мыши на карту или тап по карте на экране смартфона — и подменять статичное изображение на интерактивную карту:

    Готово, теперь карта должна загружаться по наведении курсора или тапа на экран, если пользователь смотрит сайт с мобильного.

    Проверить весь сайт на ошибки поможет сервис Анализ сайта: у него есть 70 тестов для анализа ваших и конкурентных проектов. Можно проверить не только главную, но и внутренние страницы. Оценит оптимизацию контента, ссылочную массу, технические параметры и другое.

    код карты гугл для сайта. f84ddbe9ec045960490c937a01bd0258. код карты гугл для сайта фото. код карты гугл для сайта-f84ddbe9ec045960490c937a01bd0258. картинка код карты гугл для сайта. картинка f84ddbe9ec045960490c937a01bd0258. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.Фрагмент проверки сайта

    Расскажите в комментариях, как вы сделали карту для вашего сайта и как оптимизируете ее, чтобы она не сильно тормозила загрузку?

    Источник

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

    Если вы хотите, чтобы клиенты всегда находили дорогу до вашего офиса или торговой точки — не забудьте добавить на сайт Google Карту. Клиенты смогут увидеть места рядом с вами, проложить маршрут и посмотреть панорамы улиц.

    В статье расскажем как создать Google карту и добавить ее на сайт.

    Рекомендуем: Click.ru – маркетплейс рекламных платформ:

    Как создать Google Карту: пошаговая инструкция

    Есть 2 способа создать Гугл Карту с помощью кнопки «Поделиться» и сделать свою карту.

    1 способ: через кнопку «Поделиться»

    Сработает, если место уже есть на Гугл Картах. Например, вы арендуете офис в бизнес центре, и его уже добавили на карту до вас.

    Заходим на сайт с картами — https://www.google.ru/maps/. Пишем адрес офиса, например, Москва, Пресненская набережная, Москва Сити.

    код карты гугл для сайта. image32 3. код карты гугл для сайта фото. код карты гугл для сайта-image32 3. картинка код карты гугл для сайта. картинка image32 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Затем жмем кнопку «Поделиться».

    код карты гугл для сайта. image29 4. код карты гугл для сайта фото. код карты гугл для сайта-image29 4. картинка код карты гугл для сайта. картинка image29 4. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Сервис предлагает две возможности поделиться — скопировать ссылку или скопировать код. Так как нам нужно разместить карту на сайте, выбираем «Встраивание карт».

    код карты гугл для сайта. image18 3. код карты гугл для сайта фото. код карты гугл для сайта-image18 3. картинка код карты гугл для сайта. картинка image18 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Выбираем размер карты — средняя, маленькая, большая, свой размер, а затем копируем html-код, он нам понадобится для вставки на сайт. О добавлении карты на сайт через код написано ниже.

    код карты гугл для сайта. image15 4. код карты гугл для сайта фото. код карты гугл для сайта-image15 4. картинка код карты гугл для сайта. картинка image15 4. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Важно: обратите внимание, если в Google есть карточка организации, то кроме точки на карте с адресом, можно посмотреть рейтинг, отзывы, номер телефона, часы работы и фотографии компании. Карточка организации помогает продвигать бизнес, содержит важную информацию для клиентов, повышает лояльность (они видят, что компания реально существует). Как добавить компанию в Google, читайте в нашей статье про Google Мой Бизнес.

    2 способ: создаем свою карту

    Мы сначала создаем свою карту, а потом добавляем ее на сайт.

    Заходим на сайт Google Maps — https://www.google.ru/maps/ и нажимаем на меню (3 горизонтальных полоски).

    код карты гугл для сайта. image23 3. код карты гугл для сайта фото. код карты гугл для сайта-image23 3. картинка код карты гугл для сайта. картинка image23 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Нам нужен пункт «Мои места».

    код карты гугл для сайта. image37 3. код карты гугл для сайта фото. код карты гугл для сайта-image37 3. картинка код карты гугл для сайта. картинка image37 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    код карты гугл для сайта. image30 3. код карты гугл для сайта фото. код карты гугл для сайта-image30 3. картинка код карты гугл для сайта. картинка image30 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Пока здесь ничего нет, жмем «Создать карту».

    код карты гугл для сайта. image12 4. код карты гугл для сайта фото. код карты гугл для сайта-image12 4. картинка код карты гугл для сайта. картинка image12 4. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Базовая карта не имеет названия. Чтобы назвать карту и добавить ей описание, жмем на строчку «Карта без названия».

    код карты гугл для сайта. image35 3. код карты гугл для сайта фото. код карты гугл для сайта-image35 3. картинка код карты гугл для сайта. картинка image35 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Добавляем название и описание, после чего жмем «Сохранить».

    код карты гугл для сайта. image28 4. код карты гугл для сайта фото. код карты гугл для сайта-image28 4. картинка код карты гугл для сайта. картинка image28 4. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Приближаем карту до нужного населенного пункта, а затем находим улицу и здание. Чтобы добавить точку на нужное здание, нажимаем на значок геолокации.

    код карты гугл для сайта. image3 7. код карты гугл для сайта фото. код карты гугл для сайта-image3 7. картинка код карты гугл для сайта. картинка image3 7. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Нажимаем на здание. Точка добавлена, теперь нужно ее назвать и добавить описание. Нажимаем «Сохранить».

    код карты гугл для сайта. image19 3. код карты гугл для сайта фото. код карты гугл для сайта-image19 3. картинка код карты гугл для сайта. картинка image19 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Точка содержит координаты. Они могут пригодиться клиентам, которые используют GPS навигатор. Стоит добавить фотографии, например, фасад здания и вход в ваш офис, так клиентам будет проще вас найти. Фото добавляем через значок фотоаппарата.

    код карты гугл для сайта. image16 4. код карты гугл для сайта фото. код карты гугл для сайта-image16 4. картинка код карты гугл для сайта. картинка image16 4. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Цвет метки можно изменить, для этого нажимаем на инструмент заливки. Изначально она синего цвета, можно выбрать более яркий, например, красный или зеленый, чтобы ваша метка отличалась от окружающих. В этом же разделе можно поменять значок со стандартного значка геолокации на другой. Пусть значок отражает вашу деятельность — если это кафе, выберите значок со столовыми приборами, если хостел — значок кровати.

    код карты гугл для сайта. image10 5. код карты гугл для сайта фото. код карты гугл для сайта-image10 5. картинка код карты гугл для сайта. картинка image10 5. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Значки наглядно показывают, что находится в здании — где можно покушать, где переночевать, где совершить покупки. До созданной точки можно построить маршрут. Например, от метро. Делается через значок косой стрелки.

    Точку можно отредактировать или удалить — значки карандаша и корзины.

    код карты гугл для сайта. image7 5. код карты гугл для сайта фото. код карты гугл для сайта-image7 5. картинка код карты гугл для сайта. картинка image7 5. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Чтобы открыть меню карты, жмем на 3 точки рядом с названием. Можно удалить карту, задать область просмотра по умолчанию, добавить на сайт, экспортировать и распечатать.

    код карты гугл для сайта. image6 7. код карты гугл для сайта фото. код карты гугл для сайта-image6 7. картинка код карты гугл для сайта. картинка image6 7. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Также можно настроить совместный доступ и сделать карту видимой для всех, все это делается через кнопку «Поделиться». Особой необходимости в совместном доступе нет, достаточно создать карту один раз и добавить на сайт, но сама функция присутствует. Она нужна для более сложных проектов, например, для тех, кто разрабатывает маршрут для экскурсий.

    код карты гугл для сайта. image4 7. код карты гугл для сайта фото. код карты гугл для сайта-image4 7. картинка код карты гугл для сайта. картинка image4 7. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Для простого добавления карты на сайт нужно один раз сделать ее видимой для всех с помощью вышеупомянутой функции «Поделиться». Созданную карту также можно будет добавить через html-код.

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

    Через код (HTML)

    Выше мы уже написали, что Google Карты можно добавлять на сайт при помощи html-кода, хотя это не единственный способ. Код нужен, если вы добавляете карту на самописный сайт или на сайт, сделанный на конструкторе. Да по сути, на любой, где есть доступ к html-коду, даже на Вордпресс, если вы, например, не хотите загружать его сторонними плагинами.

    Показываем на примере конструктора Wix. Если собираетесь делать сайт на конструкторе, но не знаете, какой выбрать — читайте наш сравнительный обзор.

    Нажимаем на добавление элементов (+), затем «Вставка» — «Вставка кода» — HTML iframe.

    код карты гугл для сайта. image11 3. код карты гугл для сайта фото. код карты гугл для сайта-image11 3. картинка код карты гугл для сайта. картинка image11 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    код карты гугл для сайта. image25 2. код карты гугл для сайта фото. код карты гугл для сайта-image25 2. картинка код карты гугл для сайта. картинка image25 2. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Получается вот такая карта на странице.

    код карты гугл для сайта. image31 3. код карты гугл для сайта фото. код карты гугл для сайта-image31 3. картинка код карты гугл для сайта. картинка image31 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Карту обычно добавляют в нижнюю часть страницы или в футер сайта. Для футера выбирайте маленький размер карты.

    С помощью плагина (для WordPress и других CMS)

    Если ваш сайт создан на CMS, и вы не умеете работать с кодом, проще установить плагин. Для WordPress создано несколько плагинов карт, но чаще всего используют WP Google Maps — у него более 400 000 активных скачиваний.

    В админке сайта заходим в плагины — добавить новый.

    код карты гугл для сайта. image8 7. код карты гугл для сайта фото. код карты гугл для сайта-image8 7. картинка код карты гугл для сайта. картинка image8 7. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Пишем WP Google Maps или просто Google Maps, если хотите посмотреть, какие еще плагины есть.

    код карты гугл для сайта. image21 4. код карты гугл для сайта фото. код карты гугл для сайта-image21 4. картинка код карты гугл для сайта. картинка image21 4. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Нажимаем «Установить» и «Активировать».

    В этом плагине нужно создавать карту с нуля. Нажимаем «Создать карту» или «Create map» и создается первая карта, которой сразу присваивается шорткод — его потом нужно будет добавить в нужную часть страницы. Нажимаем «Редактировать» или «Edit».

    код карты гугл для сайта. image22 3. код карты гугл для сайта фото. код карты гугл для сайта-image22 3. картинка код карты гугл для сайта. картинка image22 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Плагин предлагает 2 инструмента для создания карт, один не использует Api key, второй (Google Maps) использует.

    код карты гугл для сайта. image34 3. код карты гугл для сайта фото. код карты гугл для сайта-image34 3. картинка код карты гугл для сайта. картинка image34 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    В разделе Markers указываем адрес точки, можно добавить анимацию. Справа нужно масштабировать карту до нужного размера, например, увеличить до конкретных улиц. Сохраняем точку «Save Marker» и указываем Api Key (справа окно, где написано Please ensure you enter a Google Maps API key to continue using Google Maps), нужно нажать на ссылку.

    код карты гугл для сайта. image27 4. код карты гугл для сайта фото. код карты гугл для сайта-image27 4. картинка код карты гугл для сайта. картинка image27 4. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Ключ вставляется в соответствующее окно.

    код карты гугл для сайта. image24 2. код карты гугл для сайта фото. код карты гугл для сайта-image24 2. картинка код карты гугл для сайта. картинка image24 2. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Мы не будем подробно останавливаться на процессе регистрации — просто нужно будет заполнить несколько форм и оплатить тариф, после чего, вы получаете готовый ключ, который останется вставить в поле плагина.

    код карты гугл для сайта. image13 6. код карты гугл для сайта фото. код карты гугл для сайта-image13 6. картинка код карты гугл для сайта. картинка image13 6. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Чтобы карта начала отображаться на странице, в нужную часть вставляем шорткод и сохраняем страницу.

    код карты гугл для сайта. image38 3. код карты гугл для сайта фото. код карты гугл для сайта-image38 3. картинка код карты гугл для сайта. картинка image38 3. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

    Заключение

    Google Карта на сайте, помогает клиентам понять, где вы находитесь. Ее актуально использовать владельцам оффлайн бизнеса — торговых точек, кафе, офисов. Можно взять готовую карту и добавить ее на сайт или создать свою с нуля. На сайт карта добавляется при помощи html-кода или плагина. В некоторых случаях может понадобиться API key.

    Источник

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

    код карты гугл для сайта. 5d566bf8a2c98547546711. код карты гугл для сайта фото. код карты гугл для сайта-5d566bf8a2c98547546711. картинка код карты гугл для сайта. картинка 5d566bf8a2c98547546711. Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

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

    Работа с API гугл карт.

    Карта гугл на сайт

    Вставить гугл карту на сайт по сложности так же как и вставить счётчик для сайта.

    Да, Google Maps работают на языке JavaScript. Но чтобы вставить простую карту на сайт не нужно знать JavaScript, но нужно хоть немного понимать разметку HTML.

    Я не буду ставить куски простых примеров кода для вставки карты. Вы их можете найти в документации Google Maps, где есть множество решений и примеров простейшего кода с объяснениями.

    Вот хочу поставить обучающее видео по работе с API гугл карт.

    В видео очень хорошо показано как работать с API гугл карт и реализован пример как создать гугл-карту для группы адресов (меток).

    Я надеюсь что вы поймёте и оцените видео.

    Ссылки на сервисы и документацию из видео:

    Параметры в картах

    Масштаб для zoom:

    Панорама улицы

    Так же мы можем использовать панораму улицы, при условии что она есть для местоположения.

    Демо и код панорамы можно увидеть чуть ниже в «гибридной» карте.

    Подходит он только для одинарной метки. Конечно это только если для координат есть панорама.

    Смысл гибрида в том, что всё это всунуто в один див и через CSS свойство z-index распределено по слоям. Кнопка переключатель через JavaScript переключает с карты на панораму и обратно.

    Внешне выглядит это так:

    Для удобства код я разделил на составные части.

    Статическое изображение карты

    Чтобы использовать статические изображения карты, нужно включить API с названием Google Static Maps API

    Чтобы вставить карту в формате статического изображения, нужно в HTML вставить как обычно вставить тег img, в котором прописать путь с атрибутами для карты:

    В коде нужно вставить API-ключ и заменить название и координаты.

    Так же можно установить размеры изображения и цвет маркера.

    Обратите внимание, что в названиях городов состоящих из двух и более слов вместо пробелов используется знак +

    MySQL и PHP

    Гео-кодирование

    *** Авторизируйтесь чтобы писать комментарии.

    Источник

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *