Первый опыт с Google Maps API

    Хочу представить вам и услышать критику по поводу первой версии интерактивной карты города Пушкино (есть такой в подмосковье) с использованием Google Maps API и AJAX.

    Вот сама карта: pushkino.org (в новом окне).

    Скриншот:
    Карта города Пушкино
    Путем расширения функционала гугловской карты, был добавлен следующий функционал:
    • Возможность добавления(редактирования) своих объектов и событий на карту города зарегистрированными пользователями сайта;
    • Добавление организаций в здания, связь со справочником фирм;
    • Добавление комментариев к любым объектам;
    • Присваивание тэгов объектам, при вводе тэгов работает автодополнение;
    • Добавление фото к объектам;
    • Поиск по карте и облако тэгов;
    • Назначение любой иконки объекту;
    • Прямые ссылки на конкретные объекты карты и код для вставки в блог, пример;
    • Фильтры по типам оъектов;
    • Обзоры новых объектов/фото/комментариев;
    • Подгрузка только объектов находящихся в зоне видимости;
    • Весь основной функционал карты реализован с помощью PHP & AJAX & jQuery;

    Вот такой мой первый опыт. Жду отзывов :)
    Стоило ли выносить карту на главную страницу портала? Раньше сайт выглядел вот так.

    Комментарии 96

    • НЛО прилетело и опубликовало эту надпись здесь
        0
        Спасибо :) Использовалась библиотека jQuery и ее некоторые ее плагины. Но основной код самописный.
        • НЛО прилетело и опубликовало эту надпись здесь
            +7
            Полностью самописный.
              0
              Качественно, респект. Много времени ушло?
                0
                На карту - 1,5 месяца работы по вечерам и не каждый день.
        +2
        очень понравилось, хотя по-моему вывод комментариев к объектам можно было бы сделать прямо в самом всплывающем мессадж боксе через тот же AJAX.
          +4
          Если сдeлать эту штуку конфигурируeмой и продавать отдeльным городам... прeдставь сeбe только эту кучу дeнeг :)
            0
            Интересно. Я об этом не думал :)
              0
              мы бы купили такое для Запорожья, отписал в асю
              +2
              Сделать то можно, но как показала практика, городским властям это не интересно. Максимум, могут простейший шаблонный сайт заказать (и отмыть на этом бабки). Чаще городскими порталами занимаются либо энтузиасты, у которых нет денег для того чтоб заказать, но есть желание сделать своими руками, либо местные фирмы, которым нужен пиар, но времени на поддержку портала нет. Продать движок можно только последним, но они обычно на местном уровне ищут разработчика. Сам имел опыт разработки городского портала для частной фирмы. Они поигрались немного, и передали проект своим партнёрам. Потом и партнёры забили на поддержку. Но денег я заработал. :)

              Сейчас разрабатываю собственный портал на новом движке.
                0
                Как же я с Вами согласен! Портал нашего города разрабатывали просто любители, вовремя для этого зарегистрировавшие домен типа названиегорода.ру, и только год где-то, может чуть больше за портал взялась администрация, и то не она сама, а ээ... пиарщики городские. Ну там пошло: официальная страница городской газеты, городской тв-станции и т.д. Живые журналы завели... А так - возвращаюсь к тому, с чего начал: администрации пофиг :)
                0
                Хочу заметить, что Google Maps далеко не везде в России
                  0
                  можно свою карту привязать(http://open.atlas.free.fr/GMapsTransparenciesImgOver.php). я так и сделал. сейчас портал для Алматы разрабатываю.
                +1
                Отличный городской портал. Единственное, что можно подправить — иконки обьектов на карте.
                  +1
                  Полностью согласен. Больше всего вызывают такое желание две иконки — финансы и жилые дома, уж больно похожы.

                  И от себя, kinda bugreport: когда ставишь галочку в фильтре, а потом снимаешь их все — на карте не отображается ничего. Это так задумывалось (мало ли, вдруг кому захочется чистую карту посмотреть) или это таки глюк?:)

                  В целом — классно:) И, мне кажется, стоит оставить это на главной, по умолчанию. А вообще, дать пользователям выбирать, что отображать на главной — карту или список актуальных новостей-анонсов, ведь для жителей города это явно интереснее.. Тем более, что у вас есть там регистрация.
                    0
                    когда ставишь галочку в фильтре, а потом снимаешь их все — на карте не отображается ничего

                    Баг повторить не удалось.. Когда все галочки сняты - отображаются все объекты.
                      0
                      Ой, и правда. Извините, я просто не дождался подгрузки объектов в тот раз *краснеет*;)
                        0
                        Кстати, а как у вас там с модерацией?.. А то я вот приметил «государственного натариуса» — http://www.pushkino.org/?act=map&lat=56.…
                        Что наводит на мысль о возможности спама или просто идиотских шуточек.. Или это вы просто случайно пропустили?)
                          0
                          Там премодерация всего. Но пока карта молодая к «государственному натариусу» относимся нормально :)
                            0
                            Ну, значит, все ОК:) Дальнейшего вам развития;)
                              0
                              Спасибо!
                    0
                    За последний год стало жутко неудобно пользоваться Гугловской картой. Постоянно появляется куча значков на карте, и выглядит это как огромная помойка. Замахался отключать все новые фичи. Уважаемые разработчики, поработайте над юзабилити, пожалуйста. А то, искать информацию в Желтых Страницах(бумажных!) проще и быстрей чем в ГуглМэпс.
                    +1
                    офф-топик!

                    Улыбнуло название улиц: Тургенева, Лермонтова, Крылова, Гоголя + названия города. Класс!!
                      0
                      какая посещаемость у портала? странно, что на таком действительно приятном сайте не продается реклама
                      у нас в Зеленограде (200 000 населения) на www.zelenograd.ru с этим проблем нет, даже наоборот - перебор
                        0
                        2500-3000 уникальных в сутки.
                          0
                          У вас действительно население всего чуть больше 100 тысяч?
                            0
                            Да, в самом городе около того. Но у нас район большой, может до 180 дотянет.
                              0
                              Хм. А у нас почти 300 тысяч в городе, но подобного хорошего портала до сих пор нет. Я думал что и нет особо смысла делать, но теперь, кажется, вдохновился, и уже думаю взяться. Жаль только нашего города в гугле нет:(
                                0
                                Ладно 300-тысячные города, там даже Новосибирска пока нет с его-то полутора миллионами!
                                  0
                                  А Набережные Челны с 500 тысяч есть. Действительно странно.
                            0
                            тогда не вижу никаких препятствий получать с портала нормальный доход
                            0
                            Вот и получаються из "приятных сайтов" то, что мы сейчас имеем счастье наблюдать на Зеленоградском портале. Нет, реклама - это хорошо и здорово. Но когда открываешь страничку и в глазах начинает рябить - это жесть!
                            0
                            Как я понимаю исходная карта Гуголовская. Есть ли опыт наложения своей карты. Я спрашиваю потому, что уже давно стоит необходимость сделать подобное, но для тех городов, для которых Google карты еще не делал.
                              0
                              Увы, такого опыта нет.
                                0
                                все-расно спасибо за пост. Главное, что люди этим занимаются, значит, будет у кого спросить, если што.
                                0
                                здесь можно привязать свою карту к google maps:
                                http://open.atlas.free.fr/GMapsTransparenciesImgOver.php
                                пара полезных статей:
                                http://econym.googlepages.com/custommap.htm
                                http://mapki.com/wiki/Automatic_Tile_Cutter
                                если кому-нибудь нужен скрипт для разрезания карт в формате png могу скинуть.
                                0
                                Класс! По мне так один из лучших и наиболее современных городских порталов. Хотя не скажу, что видел их много:) Но то, что видел, обычно было сделано совершенно безвкусно, несовременно и неинтересно. А тут, хоть и город не мой, стало интересно походить и по другим разделам, поизучать. Мои похвалы!
                                Кто ещё видел интересные городские сайты и порталы - кидайте ссылки, интересно посмотреть стало вдруг, сравнить с тем что есть у нас. Даже зародилась мылся сделать для нашей провинции что-нибудь посовременнее, хоть и сомневаюсь что здешняя аудитория и рекламодатели это оценят:)
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  Отлично сделано. Глаз радуется. Небольшим городкам должно быть минимум интересно. + Возможность кратко и полно презентовать город что есть чего нет. Порадовала возможность подгружать фотографии к объектам. Даже не знаю к чему придраться)
                                    +1
                                    Очень патриотичная фича, если кликнешь в карту вне города: "Сюда нельзя" :)
                                      0
                                      в Safari низ карты залит серым
                                        0
                                        Похоже на глюк браузера. Ошибка больше не повторяется.
                                          0
                                          ну, это Public Beta, в других браузерах всё нормально
                                          в Safari много чего не работает - отправка файлов в meebo, чат в gmail etc.
                                          0
                                          А у меня чего то вообще вся карта не отображается :( , серое пятно. Сначала грешил на Оперу, но и в IE такая же шняга. В чем может быть причина? Сайт гуглмапс отлично вижу.
                                          0
                                          Чувак, это супер! Мне нравится!
                                            0
                                            Я с июля месяца думаю о такой штуке.

                                            Не поделитесь ссылками, которые вам помогли extend google maps?
                                            Описание API наверняка легко найти, а вот какие-нибудь супер-пупер полезные ссылки?:)
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                +1
                                                Мне больше всего помогли
                                                http://econym.googlepages.com/index.htm
                                                http://mapki.com
                                                Но самое главное &mdsah; описание API. Там правда всё просто :)
                                                  0
                                                  Очень спасибо. Дико вкусные ссылы. Плюсики ставить, правда, не могу, но очень благодарен :)
                                                  0
                                                  Вот книжка: Beginning Ajax with PHP: From Novice to Professional
                                                  Там всё очень понятно расписано!
                                                  http://www.knigka.info/2007/08/13/beginn…

                                                  А вот сырцы из книжки с официального сайта:
                                                  http://googlemapsbook.com/source/
                                                  0
                                                  А опенсорса не будет? ;)
                                                    0
                                                    Я собираюсь делать нечто аналогичное.
                                                    Правда, в свободное от безделья время, поэтому сроков нет.
                                                    0
                                                    неплохой "первый опыт". Для тех кто не работал с этим апи, могу сказать что программировать на нем очень просто (http://www.google.com/apis/maps/documentation/reference.html), все на уровне интуитивно понятного обращения к объектам. Перед началом работы ip web-сервера надо зарегистрировать - http://www.google.com/apis/maps/signup.html, потом подсоединить библиотеку (тег script src="http://www.google.com/jsapi?key=ABQIAAAAudTBVVYh_tJ-6ceBPUOEixRQHVHRaANHPxGLOMHCCgZOzJmvoBTDOQ3H2gHb52vVgHHA2r1HuhwM8Q")
                                                    Один из примеров (http://www.google.com/apis/maps/documentation/examples/index.html)
                                                    function initialize() {//вызывается при загрузке документа
                                                    if (GBrowserIsCompatible()) {
                                                    var map = new GMap2(document.getElementById("map_canvas"));//обращение к div-у
                                                    map.setCenter(new GLatLng(37.4419, -122.1419), 13);

                                                    // Add 10 markers to the map at random locations
                                                    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));
                                                    }
                                                    }
                                                    }
                                                      0
                                                      Просто, пока не захочешь сделать что-то нестандартное ;)
                                                        0
                                                        судя по всему Вы уже с гугл апи на ты, киньте ссылку на пример Ваших работ
                                                          0
                                                          Google API я использовал только на http://www.pushkino.org/
                                                            0
                                                            значит http://www.pushkino.org/ относится к нестандартному
                                                      0
                                                      удачи вашему стартапу,.. сайт тоже толково сделан ;)
                                                        0
                                                        Пара наблюдений/пожеланий к интерфейсу, если можно:

                                                        1. Очень странно что на ЛКМ и двойной ЛКМ повешано добавление организации/места и т.п. Если АПИ гугловое, то и логичнее было бы повешать на дабл клик увеличение масштаба карты. Вернее если ничего не назначать, то двойные клики (левый - увеличить, правый - уменьшить) работают и так. Да и не все пользователи хотят что-то добавлять — значит и режим добавления должен включаться кнопкой, например.

                                                        2. Очень много иконок при обзорных масштабах сбиваются в кучу, да и нет какого-либо разумного лимитирования показываемых иконок. Если их будет несколько сотен, клиентский браузер начнет виснуть. Да и чисто по-пользовательски - каша из иконок, а не карта, получится потом, если будет много объектов. Там и карту не посмотреть, и нужную иконку не выбрать.

                                                        3. Ну и стандартный баг для всех кто связывает список и карту на одной странице: Когда кликнуть на "Показать на карте" (в блоке - "Организации на карте") - карта на нужный объект позиционируется, а страница на карту нет :) пользователь кликнул (а карта выше и не видна - при 1024х768) - и ничего не произошло.

                                                        --
                                                        Если кого интересовала кастомная подложка - есть чудный сервис - http://gmapuploader.com/
                                                        дальше там все очень понятно.
                                                          0
                                                          Какое бы вы предложили решение для второго вопроса?
                                                            0
                                                            условные "слои"? некоторые из которых "включаются" только при определённом увеличении. и которые можно произвольно отключать-включать.
                                                              0
                                                              1 - группировать иконки в одну, над которой писать число иконок, которые можно посмотреть если приблизить карту
                                                              2 - выдавать только N иконок по какому-нибудь принципу, важные выводить на всех масштабах, а неважные (например дома/здания) на подробных масштабах
                                                                0
                                                                а лучше посмотрите различные буржуйские сервисы, поизучайте - как они с этим борются.
                                                                  0
                                                                  например, wikimapia.org
                                                                  там для каждого масштаба - не более 100 объектов
                                                                  0
                                                                  class GMarkerManager
                                                                0
                                                                Автор, прими и мой низкий поклон.
                                                                Я не очень силен в программных кодах, но пользуюсь гуглмапсом и вижу Ваш проект. Вдохновляет.
                                                                  0
                                                                  Химик молодец! Удобно и вебдванольно. Спасибо! =)
                                                                    0
                                                                    Очень здорово, очень! Так местные жители не торопясь смогут составить подробнейшую карту своего массива - такое не сделает ни одно картографическое бюро! Супер! Просто пример для подражания, да и только! А недочеты в управлении и интерфейсе - дело наживное. Единственное, что бы мне хотелось на месте жителей Пушкино - побольше карту :) Блок с новыми объектами можно и ниже расположить, а карту - на всю ширь окна. Хотя я не знаком с особенностями внедрения карт Google, поэтому это только мысль вслух :)
                                                                      0
                                                                      Карту на всю ширину - удобная фишка, но отдельной кнопкой.
                                                                      0
                                                                      Приятные решения. Чем JS паковал, если не секрет?
                                                                      0
                                                                      Эх... Жаль уменьшить колесиком незя :(
                                                                        0
                                                                        Попросите автора вставить map.enableScrollWheelZoom();
                                                                        :)
                                                                          0
                                                                          Я отказался от него. Так как вместе с зумированием происходит скролл страницы :)
                                                                      0
                                                                      Браво! ИМХО, один из оличейшихБраво! ИМХО, один из отличнейших примеров правильной (уместной) реализации AJAX.
                                                                      Все сделано именно так как нужно. Все под рукой, удобно и ожидаемо. Да и как портал города – просто замечательно, блеск! Продолжайте в том же духе.
                                                                      Есть, правда, несколько замечаний.
                                                                      1.Поисковая форма по недвижимости резко выпадает из общего дизайна. Режет глаз.
                                                                      2.“Справочник” и “Знакомства” видимо были сделаны давно и прикручены немного топорно.
                                                                        0
                                                                        По оформлению на хабр похоже, даже фавайкон :)
                                                                          0
                                                                          фавайкон такой появился еще до хабра :)
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                            0
                                                                            Прикольно! )
                                                                              0
                                                                              -нет поиска по адресам
                                                                              -нет интеграции карты с другими разделами

                                                                              т.е. если переходим в раздел недвижимости и находим что нибудь интересное,
                                                                              то нужно уходить с сайта что бы найти интересующий объект на карте.
                                                                                0
                                                                                впечатляет! давно хотелось сделать нечто подобное, и тут вы подкинули идею - использовать API от Google Maps
                                                                                (жаль только наш провинциальный городок абсолютно не детализирован в GM, а кастомизировать нечем - актуальной карты города в доступе нету.. остается ждать до лучших времен)
                                                                                  0
                                                                                  а как сделаны такие красивые инфо окошки?
                                                                                  выглядит и работает просто супер.
                                                                                    0
                                                                                    Быстро сервер откликается. На чем крутится?
                                                                                      0
                                                                                      nginx, apache 2, php, mysql
                                                                                        0
                                                                                        а железо/хостинг?
                                                                                          +1
                                                                                          свой сервак, p4 dual core, 2 Gb RAM.
                                                                                      0
                                                                                      Можешь поделиться опытом по связке google maps и ajax?
                                                                                        0
                                                                                        Мой следующий проект :)
                                                                                        http://habrahabr.ru/blog/i_am_clever/326…
                                                                                          0
                                                                                          Классно сделан проект в целом ну и использовании gm очень красиво.

                                                                                          Один вопрос, использование gm свободно или оплачивается? Т.е. как вы получали ключ на использование карты?
                                                                                            0
                                                                                            Это бесплатно.
                                                                                            0
                                                                                            Chemist - круто!
                                                                                            подскажи, ты при добавлении просто геокодируешь объект, и с координатами его в базу пихаешь? а потом при движении карты вытаскиваешь объекты из текущего экстента? или как?
                                                                                              0
                                                                                              При добавлении объекта записываю всю информацию о нем и его координаты себе в базу. При движении по карте подгружаю из своей базы требуемые объекты.

                                                                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                            Самое читаемое