Организация добавления и вывода данных на карту Google Maps по категориям, используя PHP и MySQL

На страницах своего блога «Занимательная веб-картография» я уже писал, как организовать добавления данных пользователями и вывод этих данных на карту Google Maps с использованием PHP и MySQL.

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

В последующих заметках я планирую написать о том, как можно адаптировать получившийся код под 3 версию API Google Maps и как можно в месте с данными добавлять файл с изображением для балуна.

Для начала мы возьмем файлы, которые были получены в ходе работы в заметке «Google Maps – добавление меток на карту пользователями» : zapros.sql — файл с sql-кодом для создания таблицы markers; phpsqlinfo_dbinfo.php — для соединения с базой данных; phpsqlinfo_addrow.php — для записи введенных данных о метке в таблицу markers; phpsqlinfo_add.html — основной файл, который выводит карту и организует интерфейс добавления меток.

Следущие наши действия.

В базе данных MySQL мы создаем таблицу markers, используя sql-код из файла zapros.sql

Затем, нам необходимо исправить файл phpsqlinfo_dbinfo.php, изменив в нем значения параметров для соединения с базой данных на ваши: $sdb_name — имя хоста, как правило locflhost; $user_name — логин пользователя базы данных; $user_password — пароль пользователя базы данных; $db_name — название вашей базы данных.

Теперь обратившись к файлу phpsqlinfo_add.html через браузер вы должны увидеть карту Google Maps, щелкнув по карте появится маркер, по щелчку на маркере появится форма для ввода параметров метки.

Вы можете изменить значения координат начального центра карты на нужные вам в строке map.setCenter(new GLatLng(56.32811,44.0), 15); файла phpsqlinfo_add.html.

Этот же файл мы будем изменять для организации вывода меток пользователей по категориям.

И так, пользователи добавили несколько меток с обозначением ресторанов, кафе и баров на карту, нам нужно их вывести по категориям.

Мы на страницу с картой добавим элементы для выбора категорий.

Для этого между строчками

А после строки код определения стилей

И отредактируем строку

Загружаем файл phpsqlinfo_add.html в браузере и наблюдаем

Теперь нам нужно организовать вывод на карту меток для выбранной категории. Для этого нам понадобиться подключить к нашему файлу JavaScript-библиотекку jQuery, загрузить последнюю версию которой можно отсюда.

Подключаем ее добавив строку сразу после подключения API Google Maps

Две строки в начале функции инициализации карты

И две закрывающие скобки в конце функции >> на >);

Также необходимо удалить все из тега body.

Мы сделали подготовительные операции, которые позволяют нам использовать возможности jQuery.

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

Приведу код для нашей основной функции:

Обработчик события клика по карте GEvent.addListener(map, «click», function(overlay, latlng) < у нас уже был ранее.

Перед ним мы добавили обработчик события выбора соответствующей категории (checkbox), если влажок для категории установлен в асинхронном режиме с помощью функции getJSON производиться GET запрос к файлу upload.php, в котором выполняется обращение к таблице в базе данных для выбора параметров меток для данной категории.

В файле upload.php также из полученных данных формируется ответ в формате JSON, который затем передается в функцию setMarkers для обработки.

Код файла upload.php:

В функции setMarkers из полученных данных data, формируется массив меток с содержимым для балуна и добавляется на карту.

А функция createMarker проверяет событие клика по метке на карте из данной категории и открытия балуна с информацией.

И еще остались не описанными две функции show и hide — которые соответственно отображают или скрывают метки для данной категории.

Полный новый код файла phpsqlinfo_add.html:

Загружаем карту и отмечаем категорию — Бары, все метки данной категории отображаются на карте.

Щелкаем по одному из маркеров — открывается балун с информацией

Снимаем отметку с категории — маркеры удаляются с карты.

Также работает и добавление маркеров на карту.

Щелкаем по карте, а затем по появившемуся маркеру, открывается форма для ввода параметров, заполняем ее и сохраняем.

Появляется сообщение о добавлении данных.

Данные добавленные пользователем остаются на карте не зависимо от включения или выключения категорий.

После перезагрузки страницы метки отображаются уже конкретно для каждой категории.

Организация добавления и вывода данных на карту Google Maps по категориям, используя PHP и MySQL : 21 комментарий

ох, чувствую засяду я на месяц в изучение всех ваших примеров для своего проекта… 🙂

очень хотелось бы, что бы Вы попробовали сделать портирование для fusion tables (использование вместо mysql)

да-да, всецело поддерживаю идею workdao, а именно: был бы безморно благодарен, если вы в следующих статьях опишите способ добавления пользователями данных в fusion tables

А можно как-то вывести названия стран по тем координатам что в Базе данных?

+1 за идею «описания» FT 🙂

Здравствуйте, у меня небольшой вопрос: а как сделать чтобы чекбоксы были включены по умолчанию и значки отображались.

А зачем? Чем больше значков одновременно отображается на карте, тем медленнее начинает браузер работать с картой. А иногда браузер может вообще зависнуть. Теперь ответ на вопрос, для включения чекбоксов изначально в параметры добавить checked=»checked». И нужно организовать вывод всех значков из всех категорий при начальной инициализации карты.

Спасибо большое за инструкцию . Интересует вопрос как можно на основе этого сделать «кластеризацию» используя MarkerClusterer . Чтобы метки группировались если их много. А то я никак не могу разобраться. Заранее спасибо за ответ.

И второй вопрос , можно ли вывести из базы данных метки на карту, если у нас нету координат, а только название городов.

Пробовал перевести это все в версию 3, но ничего так и не получилось. Очень хочется уже нового выпуска 😉 Вроде бы и не сложно, но ничего не работает… Кстати, а как в новой версии изменился GDownloadUrl ?

А как сделать, чтобы карта была «резиновой» и увеличивалась уменьшалась в зависимости от разрешения экрана? Если задавать размер не в пикселях, а в процентах, то, вообще, нет карты! А при пикселях для разных разрешениях приходится каждый раз менять размеры! Может кто подскажет… Очень нужно.

Нужно добавить в стили страницы с картой

html, body

На примере не отображаются маркеры.

Не отображались значки иконок, т.к. Google закрыл сайт http://labs.google.com откуда они брались. Я положил значки на свой блог и теперь они отображаются

В opere отображаются, в chrome не отображаются. Проблема браузера? Хотя на других примерах маркеры видны.

Приношу извенения. Теперь и в chrome работает.

Большое спасибо за помощь. Все работает. Я делаю сайт в joomle карту вставил в модуль html. Там есть один минус когда правишь код прямо в модуле, а потом сохраняешь,после этого карта не отображается. Но если вставить измененный код целиком все работает.

Сергей, вот мучаю ваш сайт уже не первый день. По этой статье несколько вопросов: 1)Ваш пример по ссылке http://webmap-blog.ru/files/gmap/phpsqlinfo_add_vcat.html у меня в chrome и Mozilla отображается в неверной кодировке, только в Opera все нормально. Красные флажки не отображаются… Баров нет в базе данных? 2)На счет изображений. Если я тестирую на localhost мне нужно менять путь к изображениям и класть их к себе? При полной копии Ваших файлов у меня на локалхосте маркеры не ставятся. Заранее благодарна за ответ

1. Бары не отображались из-за пустых значений в базе данных (name, address), я их удалил и все работает. 2. Дело в том, что раньше изображения меток лежали на сайте одного из проектов Google, который был закрыт и я перенес иконки себе на блог. Поэтому на localhost при отключенном интернете они не отображаются. Надо их скопировать к себе и поправить пути в файле карты.

Здравствуйте на моем сайте в новых статьях перестала добавятся карта гугл , не могли бы вы за финансовае вознаграждение починить данный косяк на моем сайте?

Пишите адрес сайта, посмотрю в чем дело. Попробую помочь

Спасибо разобрался вся проблема была в плагине кеширования!

здравствуйте не могли бы вы скинуть исходники не получается разобраться если вас не затруднит

📎📎📎📎📎📎📎📎📎📎