Добавление карты 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="http://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="http://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>
