GIS-LAB

Географические информационные системы и дистанционное зондирование

Размещение Google Maps на своей интернет странице

Как использовать сервис Google Maps для демонстрации карт на своем интернет сайте.

Google Maps http://maps.google.com/ - картографический сервис работающий в режиме web страницы (подробнее о сервисе ). Разработчикам предоставляется возможность свободно размещать окно карты на своих страницах и осуществлять некоторую ее настройку. Для размещения карты на определенной странице своего web-сайта можно использовать следующую инструкцию:

1. Регистрация учетной записи пользователя

Перед началом работы с API Google Maps, необходимо получить права пользователя на http://www.google.com/accounts/

2. Регистрация веб-сайта

Регистрация происходит по адресу http://www.google.com/apis/maps/signup.html. После принятия лицензионного соглашения вы получаете уникальный код (API key), позволяющий пользоваться сервисом Google Maps. Этот код в последствии должен будет присутствовать на странице с картой и будет служить для идентификации пользователя-сайта.

В результате регистрации доступ к сервису получает определенный сервер. Все страницы этого сервера могут пользоваться одним и тем же ключом. Например, если Ваш сайт называется http://gis-lab.info, то регистрация может быть использована на всех страницах адрес которых начинается с http://gis-lab.info. Следовательно для сайта: http://www.gis-lab.info (то с www), эта регистрация работать уже не будет. Также можно получить API key для определенной папки на сайте, например http://gis-lab.info/folder, таким образом этот ключ будет работать только для карт на страницах находящихся в этой папке.

3. Использование полученной регистрации на веб-странице

Для подключения к сервису в текст страницы добавляются строки регистрации, включающие полученный вами уникальный код. Этот фрагмент кода в виде скрипта располагается между тэгов заголовка страницы <head></head>.

<head>
…
/* Получить доступ к сервису */
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=полученный вами ключ" type="text/javascript"></script>
...
</head>

4. Скрипты создания и визуализации карты

Основной скрипт, необходимые для создания карты, должен располагаться сразу после скрипта инициализации, также между тэгов <head></head>.

<script type="text/javascript">
//<![CDATA[
function load() {
/* Проверка на совместимость с используемым браузером*/
if (GBrowserIsCompatible()) {
/* Создать точку - центр */
var pntx=37.62039542198181;
var pnty=55.75294375419617;
var center = new GLatLng(pnty, pntx);
/* Создание объекта карты, googlemap - имя, по которому находится объект карты, описываемый ниже*/
var map = new GMap2(document.getElementById("mapgoogle"));
...

Стандартные элементы управления, такие как масштабная линейка, навигационная панель, переключение вида карты могут присутствовать или отсутствовать на вашей карте. Для появления этих элементов, необходимо добавить одну из этих строк (или их все, в зависимости от того, какие элементы навигации вы хотите получить на карте) к скрипту приведенному выше.

...
/* Создать элементы навигации, масштабную линейку */
var map_ctrl=new GLargeMapControl();
var map_type_ctrl=new GMapTypeControl();
var map_scale_ctrl=new GScaleControl();
/* Добавить элементы навигации */
map.addControl(map_ctrl);
/* Кнопки выбора типа карты*/
map.addControl(map_type_ctrl);
/* Добавить масштабную линейку */
map.addControl(map_scale_ctrl);
/* Центрировать карту по созданной точке, установить масштаб и сделать начальным видом - космическую съемку, а не карту*/
  map.setCenter(center, 17, G_SATELLITE_TYPE);
}
}
//]]>
</script>
...
<body onload="load()" onunload="GUnload()">
...

В тэге <body> должны быть определены функции вызова основной процедуры создания и показа карты, а также освобождения памяти, после того, как пользователь покидает страницу.

<body onload="load()" onunload="GUnload()">

5. Размещение на веб-странице окна карты

Окно карты размещаем опять же в виде скрипта располагается между тэгов собственно страницы <body>.

<body>
...
/* Размещение на странице */
<div align="center"><div id="mapgoogle" style="width: 90%; height: 500px;"></div></div>
...
</body>

6. Результат

Посмотреть пример. В исходном коде страницы примера можно найти необходимые фрагменты кода. На странице должно быть 3 основных фрагмента: Part1 (скрипт идентификации), Part2 (скрипт создания карты), Part3 (размещение карты на странице). Эти части, на странице примера обозначены следующим образом:

<!-- GOOGLE Part1 START -->
<!-- GOOGLE Part1 END -->

Авторы и клиенты могут локально дополнять карту своими данными. Несложные команды позволяют добавить на карту собственные контуры, маркеры, интерактивные подсказки и всплывающие окна. Данные для отображения могут находиться как непосредственно в коде web страниц, так и во внешних файлах. Имеется возможность создавать тематические слои непосредственно в режиме просмотра web страницы. Эта часть открыта, возможности расширения классов событий, создание мастеров и специальных поисковых систем обеспечивают практически ежедневный приток новых идей и приемов.

Подробную актуальную информацию вы можете получить на http://www.google.com/apis/maps.

Следует отметить весьма активный и профессиональный форум http://groups-beta.google.com/group/Google-Maps-API где присутствуют ответы на вопросы, не отраженные в документации, парад страниц (профессионалам стоит взглянуть на классы решаемых задач, приемы и возможности).

Интерфейс Google Maps быстро развивается, пожелания и рекомендации профессионалов во многом его формируют. В совокупности с другими продуктами Google (GMail, Enterprise Search и т.д.) складывается ощущение направления IT, органически сочетающего потребности пользователей и возможности GIS для подготовки геоданных.

Если у Вас есть замечания, предложения или иные пути решения обсуждаемых проблем - будем рады добавить недостающую информацию к этой статье. Вы можете отправить свои комментарии используя форму или адрес электронной почты приведенные ниже.

Обсудить в форуме Комментариев — 14

GIS-Lab & Валерий Хронусов

Последнее обновление: September 09 2021

Дата создания: 27.07.2005
Автор(ы): Максим Дубинин