Отсебятина
Так как карма перестала быть на нуле (благодарю того, кто проголосовал), решил сделать несколько кросс-постов из моего блога, где переводил туториалы, посвященные Google Maps API.<p/>
Цели и задачи
Это пособие приведет Вас к созданию Вашей первой работающей карты, использующей Google Maps API. Пособие также охватывает процесс публикации карты в Сети с помощью Google Pages и настройки карты, чтобы она отображала область, выбранную Вами, с расположенными на ней маркерами и инфо-окнами.
Время изучения
Около 60-ти минут.
Необходимые условия
Прежде, чем вы начнете изучать этот материал, у вас должны иметься:
- Аккаунт на Gmail;
- Базовые знания HTML;
- Базовые знания JavaScript.
Содержание
Это пособие разделяется на следующие параграфы:
- Настройка аккаунта на Google Pages;
- Получение работающей карты;
- Нахождение Широты/Долготы Вашей местности;
- Настройка карты;
- Подведение итогов.
Настройка аккаунта на Google Pages
Для того, чтобы опубликовать Вашу карту в Сети, будем использовать Google Pages. Также Вы можете использовать любой другой сервер для хранения своей (своих) карт. Если вы уже знакомы с Google Pages или используете свой собственный сервер, то можете смело пропускать данный параграф и переходить к следующему.
- Зайдите на страницу http://pages.google.com под своим GMail-логином. Если Вы впервые используете Google Pages, то Вы будете перенаправлены на страницу с описание и условиями использования сервиса. Пожалуйста, прочитайте и примите эти условия.
- После этого Вы увидите интерфейс, с помощью которого можно создать новую страницу. Кроме того, что Google Pages предоставляет удобный WYSIWYG HTML-редактор, вы также можете загружать готовые страницу со своего жесткого диска. Мы будем использовать опцию загрузки страниц, созданных вне Google Pages. Нас странице Edit page кликните 'Back to Site Manager' – появится страница Site Manager.
- Сейчас Вы должны увидеть интерфейс менеджера сайта. Он состоит из страниц, созданных в редакторе, который находится слева; меню загрузки страниц, которое находится справа и адреса Вашего сайта, который находится вверху страницы. Оставьте эту страницу открытой в вашем браузере – она нам еще пригодится в дальнейшем.
Получаем работающую карту
- Для внедрения карты Google в сайт, Вы должны получить специальный API-ключ, который связан с адресом Вашего сайта и Gmail-аккаунтом. Во-первых, посетите http://www.google.com/apis/maps/signup.html. Будьте уверены в том, что правильно поняли условия использования сервиса.
- Введите URL своего сайта в поле 'My Web Site URL'. Поставьте флажок в поле о том, что Вы согласны с условиями использования и нажмите кнопку 'Generate API Key'.
- Теперь Вы должны увидеть страницу с благодарностью за регистрацию, на которой находятся: ваш API-ключ (длинная последовательность из произвольных символов), адрес домена, для которого полученный ключ будет верным и код простенькой карты. Вы можете видеть, что полученный ключ для API присоединяется в конец кода тэга, отвечающего за скрипт загрузки карты. Оставьте эту страницу открытой в окне браузера.
- Запустите текстовый редактор. Например, Блокнот. (Советую Notepad++.) Скопируйте HTML-код со страницы с ключом и вставьте в чистый документ редактора. Сохраните этот файл под названием mymap.html.
- Вернитесь к странице с менеджером сайта Google Pages, которую мы открыли на шаге 4 параграфа 1. Кликните по ссылке 'upload', находящейся внизу меню загрузки страниц. Нажмите на кнопку 'Browse', найдите и выберите файл mymap.html.
- Как только файл загрузится на сервер, Вы увидите значок корзины рядом с именем файла и размер этого файла.
- Пришло время протестировать Вашу карту! Щелкните по ссылке 'mymap.html' в меню загрузки файлов. Вы должны увидеть окно браузера, в котором будет Ваша карта. Если все шаги были выполнены правильно, то Вы увидите карту с центром в Polo Alto, California, такую же, как эта:
http://maps.examples.googlepages.com/mymap.html.
Нахождение Широты/Долготы Ваше местности
Первой настройкой карты, что Вы проведете, будет смена центра карты на Ваш собственный (адрес дома, работы, города и т.п.). Чтобы это сделать, нужно знать координаты места, которое Вы хотите видеть в качестве центра карты. Процесс отыскания координат по адресу называется geocoding и происходит, когда вы вводите адрес для поиска на maps.google.com. Карты Google имеют один из лучших geocoding-движков, так что мы будем пользоваться ими для отыскания нужных координат.
- Зайдите на http://maps.google.com.
- Введите адрес вашего местоположения в поле для поиска и нажмите кнопку 'Searh Maps'. Если Ваш адрес был найден, то на этом месте на карте появится маркер. Если же под критерии поиска попало несколько значений, движок Вас спросит о наиболее подходящем.
- Geocoding – процесс неточный, поэтому маркер может появиться немного не в том месте: например, посередине улицы, дороги и т.д. Все, что Вам нужно сделать, — это щелкнуть в желаемой место два раза и центр карты окажется на нем.
- Как только положение центра карты станет для Вас удовлетворительным, можно «забирать» координаты этого места. Для этого кликните по ссылке 'Link To This Page'. Получите URL вида:
http://maps.google.com/maps?f=q&hl=en&q=3650+McClintock+Ave+Los+Angeles+CA&sll=34.019963,-118.290047&sspn=0.00482,0.006856&ie=UTF8&ll=34.019968,-118.289988&spn=0.001205,0.001714&t=k&z=19&om=1.
- Рассмотрим это хитровыкрученный URL. Нам нужно отыскать параметр ll и скопировать два значения, идущие после него. Это и будут широта и долгота. Их нужно куда-нибудь записать. Также можно запомнить уровень зуммирования карты: за него отвечает параметр z. Внимание: для каждой зоны карты используется свой уровень детализации, который может быть нерабочим для других областей.
Настраиваем карту
Приготовьтесь программировать! В этом параграфе мы будем изменять код нашего файла с картой, основываясь на Ваших предпочтениях. Как только Вы внесли изменения в код, Вы должны возвращаться к шагам 5-8 параграфа 2.
- Итак, файл mymap.html должен быть открыт в текстовом редакторе.
- Добавьте следующую строчку кода, используя координаты, полученные в параграфе 3:
map.setCenter(new GLatLng(37.256, 118.652), 13);
МетодsetCenter()
устанавливает центр карты с помощью классаGLatLng()
, а также — уровень зуммирования. Самым маленьким значением зума карты является 0 – виден весь мир. Перезагрузите страницу на сервер и проверьте ее работоспособность. - Теперь мы добавим код, который меняет тип карты: нормальная карта, изображение со спутника, смешанный тип. По умолчанию стоит нормальный тип отображения. За смену типа карты отвечают три кнопочки в верхнем правом углу. На сайте http://maps.google.com можно увидеть различия между этими тремя типами. Метод, который меняет тип карты называется
setMapType()
, а строчка кода выглядит так и добавляется она после строчки, устанавливающей центр карты:
map.setMapType(G_NORMAL_MAP);
map.setMapType(G_SATELLITE_MAP);
map.setMapType(G_HYBRID_MAP);
- Создадим маркер в центре Вашей карты. Код, который создает маркер:
var marker = new GMarker(new GLatLng(37.256, 118.652));
И код, который помещает этот маркер на карту:map.addOverlay(marker);
Как Вы уже, наверное, догадались, за создание маркера отвечает классGMarker()
, а за добавление маркера на карту — методaddOverlay()
. - Теперь создадим инфо-окно («пузырь» с текстом), которое будет появляться над маркером, и добавим в него немного информации о местоположении маркера. Вот код, отвечающий за это:
var html="<img src='simplemap_logo.jpg'" + "width='128' height='41'/> <br/>" + "USC GamePipe Lab<br/>" + " 3650 McClintock Ave, Los Angeles CA"
Как видно из примера, в инфо-окошко можно вставить любой HTML-код. Двойные кавычки должны быть экранированы с помощью обратного слеша:
marker.openInfoWindowHtml(html);"\""
. Если Вы хотите добавить в инфо-окно изображение, то скорректируйте его (изображения) размеры. Ну и отвечает за добавление инфо-окна методopenInfoWindow()
. - Добавим элементы управления картой. Отвечает за это метод
addControl()
. Вот некоторые элементы, код установки которых следует добавлять где-нибудь после установки центра карты:
map.addControl(new GSmallMapControl());
map.addControl(new GLargeMapControl());
map.addControl(new GSmallZoomControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
- Изменив HTML-код, можно изменить размер карты. Для этого необходимо отредактировать свойства контейнера, в котором содержится карты. Например, так:
<div id=”map” style=”width: 800px; height: 800px;”></div>
Подведение итогов
Поздравляем, вы прошли материал и создали свою первую карту на основе Google Maps API! Для того, чтобы сделать ее более функциональной обратитесь к документации. Если у вас есть вопросы, то задавайте их на форуме.