Добавление карты Google Maps на страницу
смотрим также
Материал из Справочник Web-языков
Перед размещением карты на своем сайте необходимо его зарегистрировать для получения кода доступа к картам Google Maps. Эта процедура бесплатная и занимает не более 30 секунд.
Для регистрации переходим по ссылке.
Внизу страницы соглашаемся с условиями использования, вводим URL-адрес своего сайта и нажимаем кнопку "Сгенерировать ключ к API". Шаблон:CommentBlock
Полученный код будет в дальнейшем использован при подключении JavaScript-скриптов Google.
Для размещения Goole Maps на сайте необходимо разместить слой с желаемой шириной и высотой и задать ей идентификатор:
<div style="width: 700px;height: 500px" id="GMapContainer"></div>
Именно в эту область 700 на 500 пикселей будет встроена карта Google.
Подгружаем на страницу JavaScript-скрипты Google Maps:
<script src="https://maps.google.com/maps?file=api&v=2&&hl=ru&key=ABQIAAAALTPVufm_y4bze0hX1-F_0xQZRRnT-B5O1OVkm- IywckVfduigRQhjdjpnbPnmdSpeC9ZOvfNKlNigQ" type="text/javascript"></script>
Здесь key=ABQIAAAALTPVufm_y4bze0hX1-F_0xQZRRnT-B5O1OVkm-IywckVfduigRQhjdjpnbPnmdSpeC9ZOvfNKlNigQ задает код, который вы получите при регистрации вашего сайта.
Далее нам потребуется написать функцию, которая вставляет карту Google Maps в слой на странице:
<js>function GMapInit() { // Инициализация класса Google Maps и расположение карты в слое GMapContainer var map = new GMap2(document.getElementById("GMapContainer"));
// Задаем настройки вывода map.setCenter(new GLatLng(54.61711404944475, 39.70939636230469), 14); // Широта, долгота и коэффициент // увеличения цента (обязательный параметр) map.addControl(new GLargeMapControl()); // Добавляем на карту Google Maps управление прокруткой и приближением map.addControl(new GMapTypeControl()); // Добавляем на карту Google Maps возможность выбрать тип отображения // (карта, вид со спутника, комбинированный режим) map.enableScrollWheelZoom(); // Масштабирование карты скроллингом }</js>
Осталось только запустить функцию GMapInit() при загрузке страницы:
<body onload="GMapInit()" onunload="GUnload()">
или <js>$(document).ready(function() { GMapInit(); });</js>
Полный листинг получившейся страницы со встроенной картой Google Maps:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Добавление карты Google Maps на страницу</title> <script src="https://maps.google.com/maps?file=api&v=2&&hl=ru&key=ABQIAAAALTPVufm_y4bze0hX1-F_0xQZRRnT-B5O1OVkm- IywckVfduigRQhjdjpnbPnmdSpeC9ZOvfNKlNigQ" type="text/javascript"></script> <script type="text/javascript"> function GMapInit() { // Инициализация класса Google Maps и расположение карты в слое GMapContainer var map = new GMap2(document.getElementById("GMapContainer")); // Задаем настройки вывода map.setCenter(new GLatLng(54.61711404944475, 39.70939636230469), 14); // Широта, долгота и коэффициент // увеличения цента (обязательный параметр) map.addControl(new GLargeMapControl()); // Добавляем на карту Google Maps управление прокруткой и приближением map.addControl(new GMapTypeControl()); // Добавляем на карту Google Maps возможность выбрать тип отображения //(карта, вид со спутника, комбинированный режим) map.enableScrollWheelZoom(); // Масштабирование карты скроллингом } </script> </head> <body onload="GMapInit()" onunload="GUnload()"> <h1>Добавление карты Google Maps на страницу</h1> <div style="width: 700px;height: 500px" id="GMapContainer"></div> </body> </html>