Добавление карты Google Maps на страницу

смотрим также

Материал из Справочник Web-языков

Версия от 12:28, 26 апреля 2011; Evgen (Обсуждение | вклад)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск


Перед размещением карты на своем сайте необходимо его зарегистрировать для получения кода доступа к картам 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>

Выполнить пример (addmap.html)

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования