Карта Google Maps и действующий XHTML | ВесьТоп создание и продвижение сайтов

Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

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

Карта Google Maps и действующий XHTML

Карта Google Maps и действующий XHTML

Создайте карту сайта Google Maps

Google внес некоторые изменения в свой API (интерфейс программирования приложений), поэтому многие сайты, которые использовали динамические карты Google Maps, перестали работать через «JS Maps API v2». Включая решение Ganbox из публикации «Карты Google Maps и действующий XHTML»

Независимо от того, использовали ли вы старый ключ API Google или впервые встраиваете карту Google, вам потребуется создать новый ключ API из новой версии JS Maps API v3.

Карта Google Maps и действующий XHTML

Создайте ключ API Карт Google

1. Войдите в свою учетную запись Google и перейдите на страницу https://code.google.com/apis/console.

2. В меню слева выберите «Службы» и в списке служб (где-то посередине) активируйте «Google Maps API v3», как показано на втором рисунке. Как видите, существует ограничение в 25 тысяч запросов в день, после чего карточка перестает отображаться, а вместо нее появляется сообщение «Этот сайт превысил свою дневную квоту для карточек». Это бесплатные запросы в день. Если нужны большие объемы, это оплачивается. На странице «Отчеты» будет отображаться статистика использования ключа API.

Карта Google Maps и действующий XHTML

3. После активации службы создается и становится доступным новый ключ API. В меню слева откройте страницу «Доступ к API» и в разделе «Простой доступ к API» в поле ключа API: вы увидите новый ключ API.

Для ganbox.com это выглядит так: AIzaSyCA7Zq8bapF4rhnqqgh9D7lB7eHdvqPe7c (не пытайтесь использовать его для своего сайта — это не сработает).

4. С правой стороны напротив ключа есть ссылка «Редактировать разрешенные рефералы …», щелкните ее и используйте поле для ввода одного или нескольких сайтов, на которых будет работать ваш ключ API. Например, для сайта Ganbox введите в отдельной строке: * .ganbox.com / *

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

Установка карты Goole Maps на веб-сайт

1. Загрузите код библиотеки GMapEZ с https://ganbox.com/inc/gmapez-3.0-beta1.js.

2. Загрузите этот файл JavaScript на сервер сайта, где вы будете отображать карту, например, в каталог / inc — подкаталог основного веб-каталога.

3. В верхней части страницы вашего сайта, где карта будет отображаться перед закрывающим тегом. lt; / headgt; добавьте следующие две строки:

lt; скрипт src ="https://maps.googleapis.com/maps/api/js?key=AIzaSyCA7Zq8bapF4rhnqqgh9D7lB7eHdvqPe7c& sensor = true" type ="текст / javascript"gt; lt; / scriptgt; lt; скрипт src ="/inc/gmapez-3.0-beta1.js" type ="текст / javascript"gt; lt; / scriptgt;

Первая строка после «key =» и до «& «- это ключ API Карт Google, который вам нужно изменить с помощью вашего ключа (не пытайтесь использовать его для Ganbox, потому что он не будет работать).

Во второй строке вы включаете новую библиотеку JavaScript GMapEZ, которая работает с новой версией JS Maps API v3.

4. В той части тела, где вы хотите разместить карту, добавьте следующий код:

lt; div класс ="GMapEZ GLargeMapControl GMapTypeControl GScaleControl" style ="ширина: 700 пикселей; высота: 480 пикселей;"gt; lt; a href ="https://maps.google.com/maps?q=%D0%A1%D0%BE%D1%84%D0%B8%D1%8F+%D0%B6%D0%BA+%D0%93%D0%BE % D1% 86% D0% B5 +% D0% 94% D0% B5% D0% BB% D1% 87% D0% B5% D0% B2 + 235% D0% 90& hl = bg& ie = UTF8& ll = 42.664813,23.295575& spn = 0,006209,0,016512& sll = 42.665243,23.294361& sspn = 0,012418,0,033023& t = m& hnear =% D0% B6.% D0% BA. +% D0% 93% D0% BE% D1% 86% D0% B5 +% D0% 94% D0% B5% D0% BB% D1% 87% D0% B5% D0% B2 + 235-% D0% 90, + 1404 +% D0% A1% D0% BE% D1% 84% D0% B8% D1% 8F, +% D0% 91% D1% 8A% D0% BB % D0% B3% D0% B0% D1% 80% D0% B8% D1% 8F& z = 17& iwloc = A"gt; OPENlt; / agt; lt; / divgt;

Значение атрибута href тега a представляет собой быструю ссылку на адрес, взятый из Google Maps.

Карта Google Maps и действующий XHTML

Создайте ссылку на карту Google Maps

Как показано на картинке. Сделайте следующее:

1. Перейдите на https://maps.google.com.

Ищите интересующий адрес, пока он не будет отмечен красным маркером A. При необходимости переместите маркер мышью.

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

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

3. Нажмите кнопку цепочки, чтобы открыть окно с URL-адресом карты.

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

Вывод

На этом карта готова. Конечно, вы можете изменить значения style = ”width: 700px; высота: 480 пикселей; ” чтобы изменить размер карты.

Заб. Предпочтительно поместить атрибут id в этот div и экспортировать стиль в отдельный файл CSS.

В результате вы получите карточку, аналогичную той, что находится на странице контактов на сайте ganbox.com, а код на странице будет действительным XHTML.

Дополнительные настройки см. В предыдущем сообщении Google Maps и действующий XHTML.

Читайте так же:
Not found

Нам доверяют

Интернет магазин