Google Mapplets: Начинаем работу

Итак, мы прочитали статью Google Mapplets: Концепция и примеры. Введение или ее оригинальный вариант на сайте Google, теперь хотим сделать что-нибудь сами. Разумеется, не для своей учетной записи в Google, а в общем доступе на своем сайте :-D Я не буду разделять маплеты и просто Google Maps API, хотя это не одно и то же, но из маплета можно скопировать код в обычную веб-страничку, также можно код Google Maps API оформить как маплет (не всегда, об этом пойдет речь в последней статье цикла). Будем просто рассматривать способы создания нужных нам приложений, а для удобства я использую название "маплет" как для кода Google Maps API в веб-страницах, так и для Google Mapplets. В тех случаях, когда речь будет идти исключительно о технологии Mapplets мы будем пользоваться термином "настоящий" маплет.

Первым делом нам нужно получить некий ключ, который позволит запускать маплеты со своего сайта. Дело в том, что скрипт, обслуживающий маплеты, проверяет этот самый ключ и если URL директории с маплетом не соответствует ключу, маплет не запускается. Правда, Вы можете скачать сам скрипт (http://maps.google.com/maps?file=api&v=2&key) и отключить в нем проверку ключа сайта (проверяется значение переменной GValidateKey), но будем надеяться, что Вы этого не сделаете, а отправитесь на страничку Google Maps API - Sign Up и честно получите ключ для своего сайта. На мой взгляд, условия использования довольно либеральные (полмиллиона просмотров в сутки, 50 тысяч запросов на геокодирование, общий доступ к сайту, не менять логотип на карте). Достаточно указать URL директории, в которой Вы планируете размещать маплеты и гугл сообщит Ваш ключ и предложит пример маплета, который вы можете тут же сохранить на Вашем сайте и насладиться работой своего первого маплета.
Заглянул на страничку с правилами для корпоративного использования, там все туманно, но есть одна "зацепка" - корпоративная лицензия стоит от 10 тысяч долларов в год. Немало, но паршивая карта Москвы (в формате MapInfo, с откровенно кривой топологией и атрибутикой в отдельных слоях) обойдется существенно дороже. Притом с условием использования только для одного клиента... А тут весь мир на карте. Есть о чем задуматься. А поскольку я очень "люблю" Роскартографию (притом взаимно, впрочем, я-то им ничего плохого не делал, а вот они мне...), то надеюсь, что Вы задумаетесь.

Зная то, о чем я Вам сейчас рассказал, нетрудно разместить пример из предыдущей статьи на своем сервере. Замечу мимоходом, что русский язык поддерживается, надписи на карте выводятся как им положено. Я использовал кодировку веб-страницы cp1251 (charset=windows-1251). Во избежание изматывающей дискуссии о том, какая кодировка "правильнее", попробовал вот так:
cat hello.html |iconv -f cp1251 -t utf8 >hello_u.html
и заменил в коде странички charset=windows-1251 на charset=utf-8. И в этом случае все работает правильно, на чем тему кодировок позвольте считать закрытой.

А теперь сделаем страничку чуть сложнее, добавив элементы управления и метку с надписью. Получили вполне информативную картинку, которую можно использовать на своем сайте (ну, например, чтобы друзья не забывали, где Вы живете - в наш век интернет случается и такое). Код странички простой, можете сами посмотреть, а координаты метки хранятся в файле data2.xml, расположенном в одной директории с файлом странички (да, свалка получается, надо будет переложить, но идею Вы поняли). Вот содержимое этого файла:

<markers>
  <marker lat="56.2889" lon="43.940491"/>
</markers>

Вот так выглядит Javascript код:

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(56.2889, 43.940491), 12);

        var infoTabs1 = [
                 new GInfoWindowTab("Центр города", 
            "Эту точку гугл эф считает центром Нижнего Новгорода"),
        ];

        GDownloadUrl("data2.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = 
            xml.documentElement.getElementsByTagName("marker");
            var point1 = new GLatLng(
                parseFloat(markers[0].getAttribute("lat")),
                parseFloat(markers[0].getAttribute("lon")));
            var marker1=new GMarker(point1);
            map.addOverlay(marker1);

           GEvent.addListener(marker1, "click", function() {
                  marker1.openInfoWindowTabsHtml(infoTabs1);
           });
        marker1.openInfoWindowTabsHtml(infoTabs1);

        });
      }
    }

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

Отлично, карта готова и ее может увидеть каждый посетитель Вашего сайта. Теперь Вы можете оформить созданный код в маплет и пользоваться им как кирпичиком при построении сайтов. Можно даже предоставить всем желающим этот "строительный элемент", если только Google сочтет его достойным внимания и включит в свой каталог.

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

• GPS-Club: Мои POI

В следующий раз мы научимся оформлять карту и добавлять к ней разные "фишки". Итак, читайте
Google Mapplets: Концепция и примеры. Практикум.