Делаем «умную» карту Google Maps с маркерами

Умная карта Google Maps

Карта состоит из стандартного слоя карт Google, левой панели выбора категорий и слоя маркеров на карте.

Цель написания этой статьи – ускорить работу с картой и подчистить от багов, чтобы с ней было удобно работать.

Давайте разбираться.

Карта состоит из таких файлов:

Файлы в Google Maps

В ее основе лежит работа апи.

Запустить карту в отдельном окне можно так:

http://galleryua.com/photo-3/map3/index.php?E=48.0&N=31.0&radius=100&num...

Сразу заметим, что ключевым для нашей карты является js-скрипт map3/js/script_noscroll.js либо map3/js/script.js (2 модификации с включенным скроллом мыши как управления масштабом карты либо выключенным).

В обоих файлах имеется важная для нас часть, получение данных по api от сервера:

$.getJSON('/sela/Panoramio map3/api.php?E='+E+'&N='+N+'&radius='+radius+'&num='+num, {}, function(json)

Пример обращения к апи: http://galleryua.com/sela/Panoramio/map3/api.php?E=48&N=31&radius=300&nu...

Такие данные получает javascript для формирования маркеров на карте.

Для начала заменим api на копию файла и будем работать с копией.

Мы разместили файл по новому адресу: galleryua.com/photo-3/map3/dostopr_api_2.php

Теперь в таблицу БД добавим 2 столбца id_rayon и id_oblast

таблица с новыми столбцами

структура таблицы

Теперь напишем скрипт, который рассчитает расстояние до ближайшего населенного пункта и определит какому району и области принадлежит этот населенный пункт.

Создадим папку /service/ и файл koord_api_update_raspolog.php в этой папке.
После запуска скрипта результат получаем в папке:

/var/www/gallery/data/www/galleryua.com/photo-3/service/raspolog.sql

Заливаем этот дамп в БД и проверяем, у нас в конце появилось 3 колонки:

Дамп БД

Последняя нужна доя сверки даннях с id расположения для нынешнего значения в БД.

Видим что raspolog и raspolog_test часто не совпадает. Будем разбираться, это у нас ошибка в нынешней версии скрипта или была ранее при первом расчете.

Например, http://galleryua.com/photo-3/dostoprimechatelnosti/1000019-Kostel-Ioanna...

Находится в Белой Церкви однако нынешнее местоположение указывает на с. Шкаровку:

указание места

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

Поэтому подправим скрипт galleryua.com/photo-3/service/koord_api_update_raspolog.php чтобы он вносил правку в `raspolog `, а не в `raspolog_test`.

Кстати можем проверить, сколько элементов у нас не соответствует истине:

SELECT * FROM `koord3` WHERE raspolog != raspolog_test

Получается 404 элемента:

результат запроса бд

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

правильный расчет

Импортируем данные в БД:

[root@176 ~]# mysql -uroot -p -f galleryua_gallerist < /var/www/gallery/data/www/galleryua.com/photo-3/service/raspolog.sql

И теперь приступим к правкам карты.

Добавляем переменную catid=номер_категории
http://galleryua.com/photo-3/map3/index.php?E=48.0&N=31.0&radius=100&num...

И выводим маркеры для определенной области.

Например, Хмельницкая область:

маркер области

Чуть позже нужно будет сделать еще центрирование карты на области.

Print Friendly Version of this pagePrint Get a PDF version of this webpagePDF