Введение
Google Maps API – сервис, который представляет набор функциональных API, позволяющих отображать собственные данные на Google Картах. Сервис позволяет создавать приложения, используя спутниковые снимки, технологию просмотра улиц, карты рельефа, маршруты для водителей, стилизованные карты, аналитические данные, огромную базу адресов и другие возможности картографической платформы Google [2, 5].
Работа с Google Maps
Процесс работы с Google Maps состоит из следующих этапов:
1) Инициализация карты;
2) Добавление метки на карту;
3) Присваивание события метке.
Инициализация карты. Для инициализации карты необходимо создать mapContainer, для визуализации карты :
<div id=”mapContainer”></div>
и подключить скрипт для карты:
<script src=”http://maps.google.com/maps/api/js?sensor=true”></script>
Скрипт cлужит для подключения JS API. Параметр sensor указывает, использует ли ваше приложение различные датчики (например GPS).
Ниже приведен листинг программного кода инициализации карты.
-
//Листинг 1.
-
if (navigator.geolocation) {
-
navigator.geolocation.getCurrentPosition(function(position){
-
var latitude = position.coords.latitude;
-
var longitude = position.coords.longitude;
-
var coords = new google.maps.LatLng(latitude, longitude);
-
var mapOptions = {
-
zoom: 15,
-
center: coords,
-
mapTypeControl: true,
-
mapTypeId: google.maps.MapTypeId.ROADMAP };
-
map = new google.maps.Map(
-
document.getElementById(“mapContainer”), mapOptions);
-
}else {
-
alert(“Geolocation API не поддерживается в вашем браузере”);
-
};
Опишем параметры, используемые для инициализации карты:
1) center: <координаты>– координаты центра карты;
2) zoom: <значение> – это увеличение под которым будет карта, от 0 до 18 (0 – минимальное увеличение – карта мира, 18 – максимально детальный масштаб);
3) mapTypeControl - отвечает за скрытие и отображение переключателя типов карт;
4) navigationControlOptions – устанавливает внешний вид для панели навигации (маштабирование и панарамирование) карты;
5) mapTypeId – тип (политическая, физическая, гибрид);
6) google.maps.MapTypeId.ROADMAP – один из типов карт, в данном случае обычная карта;
map – создается карта с параметрами из css файла и опциями описанными выше.
Рисунок 1 – Инициализация карты
Добавление метки на карту. Для добавления на карту метки использется функция google.maps.Marker().
В качестве параметров функции google.maps.Marker(), используются следующие:
1) position <координаты> – собственно координаты метки;
2) map <имя карты> – на какую карту, помещается метка.
Рисунок 2 – Визуализация метки на карте
Присвоение событий. Дополним метку информацией. При нажатии на метку будет всплывать окно с информацией. В данном примере в качестве информации будут отображаться текущая дата и время. Дополним листинг следующим блоком программного кода.
-
//Листинг 3.
-
var contentString = “бул. Профсоюзов, 11, Волжский, Волгоградская область”;
-
var infowindow = new google.maps.InfoWindow({
-
content: contentString});
-
google.maps.event.addListener(marker, ‘click’, function() {
-
infowindow.open(map,marker); });
Опишем параметры, используемые для добавления события к метке:
1) content : <текст> – содержимое в метке;
2) google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(<имя_карты>,<имя_маркера>) - при клике на метку, показывает окно с информацией, на карте map с привязкой к marker.
3) google.maps.InfoWindow – новое информационное окно с двумя параметрами maxHeigth, maxWidth (необязательные) – переменные определяют максимальную высоту и ширину информационного окна в пикселях.
Рисунок 3 –Отображение информации при нажатии на метку
Взаимодействие Google map API и MySQL
Так как со временем возникает необходимость в увеличении количества объектов наносимых на карту, то для оптимального и эффективного хранения информации используются БД [1, 6-12]. Рассмотрим создание БД и вывод информации для маркеров на Google Maps:
Создадим таблицу из трех столбцов: id_cord – пригодится в дальнейшем для связки с другими таблицами; mylat , mylng – координаты для построения точки на Google maps.
-
//Листинг 4.
-
CREATE TABLE coord.mycoord (
-
id_cord int(11) NOT NULL,
-
mylat double NOT NULL,
-
mylng double NOT NULL
-
)
-
ENGINE = INNODB;
Создадим файл “output.php“, в котором будет осуществляться подключение к БД и извлечение, необходимых для вывода на карту, данных с помощью sql-запроса:
-
//Листинг 5.
-
$host=‘localhost’;
-
$user=‘root’;
-
$pass=”;
-
$name_db=‘coord’;
-
//Подключаемся к серверу и выбираем текущую БД
-
$dbh = new PDO(“mysql:host=”.$host.“;dbname=”.$name_db, $user, $pass);
-
//Кодировка utf8
-
$dbh->exec(‘SET CHARACTER SET utf8′);
-
$res = $dbh->query(”
-
SELECT mycoord.mylat
-
, mycoord.mylng
-
FROM
-
coord.mycoord
-
“); // в переменную res с помощью запроса извлекаются данные из созданных столбцов
-
//Формирование массива со списком направлений
-
$cord=array();
-
while($row = $res->fetch(PDO::FETCH_ASSOC)) // возвращает массив, индексированный именами столбцов результирующего набора
-
{
-
$cord[]=array (‘lat’=>$row['mylat'], ‘lng’=>$row['mylng']);
-
};
-
$json = json_encode($cord); // Возвращает JSON закодированную строку (string) в случае успеха или FALSE в случае возникновения ошибки.
-
echo $json;
Для вывода на карту данных, извлеченных из БД, используется ajax запрос. В листинге, приведенном ниже, в переменную $res передается информация из таблицы mycoord. После извлечения данных осуществляется их вывод на карту.
-
//Листинг 6.
-
//получение данных для отрисовки
-
$.ajax({
-
url:‘output.php’, // путь к php-файлу
-
type:‘POST’, // метод передачи
-
success: function(res) // в случае успеха будет вызвана функция содержащая переменную, в которой хранятся данные полученные от сервера
-
{
-
res1 = JSON.parse(res);
-
markers[0] = new google.maps.Marker({
-
position: new google.maps.LatLng(res1[0].lat,res1[0].lng),
-
icon: image,
-
map:map
-
});
Использование БД [3, 4] позволит упростить хранение, заполнение и вывод данных на карту. Благодаря запросом можно извлекать нужные столбцы из таблицы заполнять их в массив и выводить в виде массива.
Библиографический список
- Азаров А.В., Рыбанов А.А. Автоматизированная система расчета метрических характеристик физической схемы базы данных с целью оценки трудоемкости процесса проектирования // Современная техника и технологии. 2014. № 5 (33). С. 39.
- Жуйков Р., Шарыгин Е. Методы предварительной оптимизации программ на языке javascript // Труды Института системного программирования РАН. 2015. Т. 27. № -6. С. 67-86.
- Кузьмин А.А., Рыбанов А.А. исследование методов количественной оценки схем реляционных баз данных // Успехи современного естествознания. 2011. № 7. С. 137-138.
- Морозов А.О., Рыбанов А.А. Разработка автоматизированной системы расчета метрических характеристик mysql базы данных на основе концептуального графа физической схемы // NovaInfo.Ru. 2015. Т. 2. № 34. С. 34-48.
- Радоуцкий К.Е., Островская Е.А., Сейфиева Р.А., Фарионик В.А. Использование api google maps для создания пользовательских геоинформационных систем // Iнформацiйно-керуючi системи на залiзничному транспортi. 2013. № 6. С. 6-9.
- Рыбанов А.А. Анализ базовых возможностей программных продуктов для исследования метрических характеристик баз данных // NovaInfo.Ru. 2015. Т. 2. № 33. С. 20-28.
- Рыбанов А.А. Оценка сложности физической схемы реляционной базы данных//Современная техника и технологии. 2014. № 9 (37). С. 26-30.
- Рыбанов А.А., Коростелев Р.А., Киселев В.В. IDEF1X-модель базы данных web-ориентированной информационной системы оценки семантического качества меню пользователя // Молодой ученый. 2013. № 5. С. 170-172.
- Рыбанов А.А., Морозов А.О. Автоматизация расчета метрических характеристик физических схем баз данных на основе концептуальных графов // Молодой ученый. 2014. № 9 (68). С. 26-30.
- Рыбанов А.А., Усмонов М.С.О., Попов Ф.А., Ануфриева Н.Ю., Бубарева О.А. Информационные системы и технологии / Научный ред. И. А. Рудакова / Центр научной мысли (г. Таганрог). Москва, 2013. Том Часть 4. -90 с.
- Рыбанов А.А., Фатеенков М.М. Разработка и анализ хранимой процедуры для получения глубины дерева связей таблицы и схемы базы данных // NovaInfo.Ru. 2015. Т. 1. № 34. С. 41-55.
- Черняев А.О., Рыбанов А.А. Разработка и исследование алгоритмов автоматизированного проектирования логических схем реляционных баз данных // В мире научных открытий. 2010. № 4-11. С. 128-129.