Введение
Целью программной разработки — обеспечить возможность вывода на карту объектов, извлеченных из базы данных [1, 6, 9, 12], а именно — координат маркеров карты, информации об объектах. Для реализации были использованы такие инструменты, как GoogleMapsAPI и MySQL [4, 8, 11].
Google Maps API позволяет создавать приложения используя спутниковые снимки, технологию просмотра улиц, карты рельефа, маршруты для водителей, стилизованные карты, аналитические данные, огромную базу адресов и другие возможности картографической платформы Google [5].
В качестве источника картографических данных, визуализация которых необходима, используется база данных MySQL.
Работа с Google Maps API
Чтобы добавить на страницу своего сайта карту нужно подключить js скрипт:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ& sensor=false"> </script>
Далее в теле документа необходимо создать который будет содержать в себе карту.
<div id="map "></div>
Следующим этапом является инициализация карты. Функцию navigator.geolocation.getCurrentPosition() передаются текущие координаты пользователя, на основе которых определяется географическое положение пользователя.
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
varcoords = new google.maps.LatLng(latitude, longitude);
varmapOptions = { zoom: 13, center: coords, mapTypeControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map"), mapOptions); }
При инициализации карты, используя переменную mapOptions, можно определить следующие параметры:
- center: <координаты> — координаты центра карты;
- Zoom: <число> — увеличение при инициализации;
- MapTypeControl: <bool> — отвечает за скрытие и отображение переключателя типов карт;
- NavigationControlOptions — внешний вид для панели навигации (маштабирование и панарамирование) карты;
- Google.maps.NavigationControlStyle.SMALL — элемент масштабирования, который позволяет масштабировать карту;
- MapTypeId — тип (политическая, физическая, гибрид);
- Google.maps.MapTypeId.ROADMAP — один из типов карт, в данном случае обычная карта.
Затем в переменной map создается сам объект карты, который помещается в с идентификатором «map» на HTML странице, вместе со всеми опциями. Результат инициализации карты показан на рис. 1.

Для отрисовки маркеров на карте необходимо использовать функцию new google.maps.Marker().
new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"});
В функцию new google.maps.Marker передаются следующие параметры:
- Position: <координаты> — координаты метки;
- Map: <идентификатор карты> — на какую карту, помещается метка;
- Title: <string> — сообщение, выдаваемое при наведении курсора мыши.
Для того чтобы по нажатию на маркер выводилось информационное окно с данными необходимо инициализировать данные и затем использовать функцию google.maps.event.addListener() для добавления события открытия окна после клика мыши по маркеру.
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(markers[i], 'click',
function () { //ВЫВОД ОКНА С ИНФОРМАЦИЕЙ
infowindow.setContent(this.buborek);
infowindow.open(map, this); });
В функции используются следующие параметры:
- Markers[i]- массив маркеров на которые требуется выводить окна;
- Infowindow.setContent — устанавливает содержимое окна из текущего маркера;
- Infowindow.open(map,this) — отрисовывает окно на карту.
На рис. 2 приведен пример визуализации маркера и окна, с информацией об учебном заведении.

Вывод картографической информации из базы данных MySQL
Ниже приведен листинг процесса подключения к базе данных и извлечения из нее картографической информации посредством SQL запроса.
exec('SET CHARACTER SET utf8');
$res=$dbh->query("SELECT * FROM uchzav,info WHERE uchzav.id=info.id");
//Занесение данных из БД в массив
$mass=[];
while ($row=$res->fetch(PDO::FETCH_ASSOC))
{
$mass[]=array('name'=>$row['Name'],
'lat'=>$row['Lat'],
'lng'=>$row['Lng'],
'adr'=>$row['Adress'],
'contact'=>$row['Contact']);
};
//Кодировка массива в json формат с учетом кириллицы
$json=json_encode($mass,JSON_UNESCAPED_UNICODE);
header("Content-Type: text/html; charset=utf-8");
echo $json;
?>
В переменных host, user, pass, db_name записаны параметры для подключения к базе данных, которые используются в качестве параметров в функции создания подключения PDO. Для передачи картографических данных в JavaScript [2], необходимо произвести кодировку полученного массива данных в JSON формат при помощи функции json_encode().
Ниже приведена структура базы данных с картографической информацией.
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
CREATE TABLE info (
id int(11) NOT NULL,
Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB;
INSERT INTO info (id, Adress, Contact) VALUES
(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),
(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),
(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),
(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),
(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),
(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');
CREATE TABLE uchzav (
id int(11) NOT NULL,
Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
Lat float NOT NULL,
Lng float NOT NULL
) ENGINE=InnoDB;
INSERT INTO uchzav (id, Name, Lat, Lng) VALUES
(1, 'МБОУ СОШ №20', 48.7926, 44.7684),
(2, 'МБОУ СОШ №18', 48.7899, 44.7607),
(3, 'МБОУ СОШ №12', 48.7733, 44.7812),
(4, 'МБОУ СОШ №14', 48.7961, 44.7515),
(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),
(6, 'Волжский политехнический техникум', 48.8079, 44.7293);
Для переноса, закодированного JSON массива в JavaScript, необходимо выполнить AJAXзапрос в JavaScript файле:
$.ajax({
url:'output.php',//запрос данных из базы
type:'POST',
data: {},
success: function(res) {
res1=[];
res1 = JSON.parse(res);//парсинг в массив
} });
Используются следующие параметры запроса:
- Url: <string> — определяет адрес, на который будет отправлен запрос;
- Type: <string> — определяет тип выполняемого запроса (GET или POST);
- Data: <oбъект> — данные, которые будут отправлены на сервер;
- Success: <функция, массив> - функция, которая будет вызвана в случае удачного завершения запроса к серверу.
В итоге массив res1 будет содержать данные, которые были извлечены из базы данных с картографической информацией.
Теперь программный код для отрисовки маркеров и окон с информацией становится проще и удобнее. Картографические данные (координаты объектов, информация об объектах) в ниже приведенном листинге выводим в цикле на саму карту.
for (var i = 0; i<= res1.length; i++)
{
var info = '<p>' + res1[i].name + '</p>' + '<p>' + res1[i].adr + '</p>' + "<p>"
+ res1[i].contact + '</p>';
contentStr = '<p>' + info + '</p>';
markers[i] = new google.maps.Marker({
position: new google.maps.LatLng(res1[i].lat, res1[i].lng),
title: res1[i].name,
map: map,
buborek: contentStr
});
google.maps.event.addListener(markers[i], 'click',
function () { //ВЫВОД ОКНА С ИНФОРМАЦИЕЙ
infowindow.setContent(this.buborek);
infowindow.open(map, this);
});
markers[i].setMap(map);
}
Результат работы продемонстрирован на примере реализации проекта по выводу учебных заведений города на карту в виде маркеров и инфо-окон по нажатию на маркер, а также возможностью применять фильтры для отображения картографической информации (рис. 3).

Заключение
Таким образом, работа с картами и базами данных картографической информации [3, 7, 10] значительно упрощает вывод любой информации на карту. Весь процесс работы можно разделить на следующие этапы:
- Извлечение картографических данных из базы данных;
- Кодирование полученных данных в JSON формат;
- Парсинг картографических данных в JavaScript;
- Визуализация полученных картографических данных на карте.