Google Maps API позволяет использовать карты Google для Ваших сайтов. Имеется конечно и официальная документация (пока что вся на Английском).
http://code.google.com/intl/ru/apis/maps/documentation/
Начнемс…
Сначала необходимо зарегистрировать свой сайт и получить ключ. Это можно сделать тут:
http://code.google.com/apis/maps/signup.html
По окончании регистрации Вам выдадут ключик. И тут же будет пример кода использования карты.
Как можно легко догадаться, этот ключик используется при подключении библиотеки, вот так:
<script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAqYpqANy2ZhPGgzZQGir01BTif9xST6-
EmBWoJN14Z8KLoR80XBTf_F2pFIKVTQmZq4YaGqQz66pNAg"
type="text/javascript"></script>
А вот код самой просто странички
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIA"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
А в теге body необходимо размещение обьекта с id=’map’
Теперь немного о функциях управления картой.
1) map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Функция задает центр карты. Т.е. при открытии страницы с картой, она будет отцентрована по заданным координатам (необходимые координаты можно получить зайдя на maps.google.com и найдя нужное место).
2) setMapType() – задает отображаемый тип карты, которых на данный момент существует 3 штуки
a. Спутник - map.setMapType(G_NORMAL_MAP);
b. Нормальная - map.setMapType(G_SATELLITE_MAP);
c. Смешанная - map.setMapType(G_HYBRID_MAP);
3) Также можно добавить элементы управления картой
map.addControl(new GSmallMapControl()); - зумирование, и стрелочки перемещения.
map.addControl(new GLargeMapControl()); - аналогично предыдущему, но отображается и шкала зумирования
map.addControl(new GSmallZoomControl()); - отображается исключительно кнопки «+» и «-»
map.addControl(new GMapTypeControl()); - кнопки переключения между режимами карты
map.addControl(new GOverviewMapControl()); - отображение миникарты в правом нижнем углу
4) Ну и самое интересное это размещение меток на карте.
var marker = new GMarker(new GLatLng(37.4419, -122.1419));
map.addOverlay(marker);
И подписи к ним:
var html="Тут что-то расположено";
marker.openInfoWindowHtml(html);
5) map.panTo(new GLatLng(37.4569, -122.1569)) – автоматическое передвижение карты. Т.е. можно поставить прерывание например функцией window.setTimeout, и потом переместить карту в какую-либо точку.
6) Данный пример реагирует на перемещение карты и отображает новые координаты центра:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
7) Вывод окна сообщения без установки метки.
map.openInfoWindow(map.getCenter(), document.createTextNode
("Привет!"));
8) А данный код рисует произвольную ломанную через 5 точек
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan *
Math.random(), southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));
9) Перехват щелчков по карте. При перехвате события «click» (щелчок) мы получаем два параметра:
• щелкнут маркер;
• координаты щелчка.
Если щелкнут не маркер (а карта), то первый параметр равен нулю.
В листинге 1 пользователь щелкает по карте и по координатам щелчка появляется маркер. Когда пользователь щелкает по маркеру, маркер удаляется.
Листинг 1.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});
10) Вывод инфоокон над маркерами. В следующем коде мы перехватываем клик и показываем окно над маркером. Здесь используются замыкания JavaScript для создания контента инфоокна для каждого маркера.
// Создаем маркер с номером point, заданным и текстом label
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #" + number + "");
});
return marker;
}
// Размещаем 10 маркеров по случайным координатам
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() — southWest.lng();
var latSpan = northEast.lat() — southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan *
Math.random(), southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
11) Информационные окна с закладками. Вторая версия Google Maps API дает нам классы openInfoWindowTabs() и GinfoWindowTab, поддерживающие закладки, которым можно присваивать отдельные имена. Пример в листинге 2 показывает простое окно с закладками над маркером.
Листинг 2.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Содержимое инфоокна
var infoTabs = [
new GInfoWindowTab("Закладка #1", "Содержимое закладки #1"),
new GInfoWindowTab(" Закладка #2", "Содержимое закладки #2")
];
// Размещает маркер в центре окна автоматически.
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
12) Создание пользовательских пиктограмм. Пример в листинге 3 показывает мини-маркеры. Создавая новую пиктограмму, мы должны определить изображение переднего плана, теневое изображение и его координаты.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Создание пиктограммы для "маленького" маркера
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// "Разбрасываем" 10 маркеров по случайным координатам
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() — southWest.lng();
var latSpan = northEast.lat() — southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan *
Math.random(), southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, icon));
}
13) Перемещаемые маркеры. Маркеры — интерактивные объекты, которые (если это необходимо) могут перемещаться пользователем посредством мыши. В приведенном примере мы перемещаем маркер по карте, это сделано благодаря нескольким перехватываемым простым событиям. Перемещаемый маркер поддерживает четыре события:
• щелчок (click);
• начало перетаскивания (dragstart);
• перетаскивание (drag);
• отпускание (dragend).
По умолчанию маркеры доступны только для кликов и недоступны для «таскания», но эта возможность очень просто реализуется добавлением дополнительного параметра. У перемещаемых маркеров есть также параметр «бодрость» (bouncy). Если он выставлен как true (по умолчанию), то при подхватывании и отпускании маркер весело подпрыгивает. Если вам не нравится такое «безрассудное» поведение маркера — просто выставьте bouncy=false при создании маркера, и он будет приземляться изящно (см. листинг).
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {map.closeInfoWindow();});
GEvent.addListener(marker, "dragend", function() {marker.openInfoWindowHtml("Веселый, бодрый маркер");});
map.addOverlay(marker);
14) Использование XML и асинхронного HTTP на картах. Пожалуй, одна из самых интересных возможностей Google Maps API. Пример в листинге загружает с сервера указанный XML-файл с координатами и размещает по ним маркеры.
Содержимое data.xml:
Листинг.
var map = new GMap2(document.getElementById(«map»));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GDownloadUrl(«data.xml», function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName(«marker»);
for (var i = 0; i < point =" new" id="10869" href="http://code.google.com/intl/ru/apis/maps/documentation/">http://code.google.com/intl/ru/apis/maps/documentation/
6 комментариев:
А вы сможете сделать сайт (за деньги, естественно) на основе Google Maps?
По примеру одно сайта.
Не верно поставлен вопрос:).
Если было бы ТЗ или хотя бы краткое описание того что должны быть сделано, то я бы ответил
Замечательная статья. Только начинаю изучать это дело. И вот вопросик.
Как мне сопоставить сервис с моей "рисованой картой" (отмечеными там домиками и т.д.) т.к. гугл не прорисовал мою местность?
Добрый день! Nuzil, как сделать так, чтобы при открытии карты с двумя маркерами она центрировалась не по параметру map.setCenter(new GLatLng(59.94, 30.11), 10);, а по взаимному расположению маркеров? А то они перемещаются у меня (kml источник) и уезжают за границы, а я хочу, чтобы карта следовала за ними...
Спасибо!=)
Скажите пожалуйста, что надо использовать для Google, чтобы получить возможность раскрытия карты на весь экран и обратно возвращение на место по щелчку на какой-либо кнопке по аналогии с картами Яндекс? Заранее спасибо за ответ.
Nuzil , хочу у вас замовити розробку програми по роботі з картами Google maps api. Напишіть свій телефон, або звяжіться зі мною 098 909 68 21
Отправить комментарий