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

Автор: | 21.03.2010
3 комментария

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

В этой заметке я продолжу рассказ об этой теме, я расскажу, как можно вывести в информационное окно (балун) html-код:  картинку и ссылку на сайт.

В начале, мы в базе данных создадим таблицу markers , в которой будем хранить информацию о метках.

Это можно сделать, используя утилиту PhpMyAdmin выполнив следующий SQL-код:

CREATE TABLE IF NOT EXISTS `markers` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `address` varchar(255) NOT NULL,
  `ssilka` varchar(255) NOT NULL,
  `images` varchar(255) NOT NULL,
  `lat` float(10,6) NOT NULL,
  `lng` float(10,6) NOT NULL,
  `type` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Здесь, id – уникальный идентификатор записи, name – служит для хранения названия метки, address – адрес метки, ssilka  — адрес для гиперссылки, images  — адрес файла с изображением, поля lat и lng – служат для хранения значений широты и долготы соответственно, type – тип объекта.

Добавим в таблицу предварительно мной подготовленные данные.

Это также можно сделать, используя утилиту PhpMyAdmin выполнив следующий SQL-код:

INSERT INTO `markers` (`id`, `name`, `address`, `ssilka`, `images`, `lat`, `lng`, `type`) VALUES
(1, 'Кинотеатр Канавинский', 'ул. Фильченкова, 7', 'http://centerfilm.ru.proton.mtw.ru/kt/detail.php?ID=1851', 'images/kanavinskiy.jpg', 43.944336, 56.317978, 'kinoteatr'),
(2, 'Кинотеатр Синема Парк', 'ул. Родионова, 187', 'http://www.cinemapark.ru', 'images/sinimapark.jpg', 44.073826, 56.308056, 'kinoteatr'),
(3, 'Кинотеатр КАРО ФИЛЬМ в ТЦ Шоколад', 'ул. Белинского, 124', 'http://www.karofilm.ru/cgi-bin/show.pl?option=cinema_description&id=19', 'images/chocolate_1.jpg', 44.026299, 56.319271, 'kinoteatr'),
(4, 'Комедия, Нижегородский театр', 'Грузинская ул., 23', 'http://comedia.nnov.ru/', 'images/comedia.jpg', 44.002319, 56.320202, 'teatr'),
(5, 'Нижегородский государственный академический театр оперы и балета им. А. С. Пушкина', 'Белинского ул., 59', 'http://www.opera.nnov.ru/', 'images/operteatr.jpg', 44.017063, 56.315697, 'teatr'),
(6, 'Нижегородский театр юного зрителя', 'Горького Максима ул., 145', 'http://www.tyuz.ru/', 'images/tyuz.jpg', 44.010487, 56.316444, 'teatr');

После этого формируем XML-файл с данными с последующем выводом маркеров на карту Google Maps.

В начале, мы должны получить  XML-файл с параметрами маркеров из базы данных MySQL.

Для соединения с базой данных используем файл phpsqlinfo_dbinfo.php из заметки Google Maps – добавление меток на карту пользователями

Для этого я использую самый простой способ – применение оператора echo.

Привожу код файла:

<?php
require("phpsqlinfo_dbinfo.php");
 
function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
return $xmlStr; 
} 
 
// Выбираем данные о маркерах из таблицы
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}
 
header("Content-type: text/xml");
 
// Начало XML-файла, вывод с помощью echo
echo '<markers>';
 
// Повторяем вывод для каждой записи
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
 echo 'ssilka="' . parseToXML($row['ssilka']) . '" ';
  echo 'images="' . parseToXML($row['images']) . '" ';
  echo 'lat="' . $row['lng'] . '" ';
  echo 'lng="' . $row['lat'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}
 
//Конец XML-файла
echo '</markers>';
 
?>

После того как Вы получили XML-файл с данными необходимо создать карту , используя JavaScript и подгрузить его на нее.

Для того, чтобы загрузить XML-файл на страницу, необходимо использовать API-функцию GDownloadURL. GDownloadURL является как бы оболочкой для метода XMLHttpRequest, который используется для отправки запросов в XML-форме. Первым параметром функции GDownloadURL является путь к XML-файлу. Второй же параметр – это функция, которая будет выполняться при получении ответа от XML.

Примечание: очень важно понять, что GDownloadURL работает асинхронно – функция, являющаяся вторым параметром GDownloadURL, не будет срабатывать, как только Вы применили этот метод. Чем объемней Ваш XML-файл, тем больше потребуется времени для вызова этой функции-параметра. Не следует помещать никакого кода, отвечающего за размещение маркеров на карте, после метода GDownloadURL – его нужно помещать в функцию-параметр.

Функция-параметр необходима для того, чтобы отыскать все элементы “markers” в XML. Для каждого маркера мы восстанавливаем значения названия, адреса, изображения, ссылки, типа и координат, а затем мы передаем эти значения функции creatMarker, которая помещает маркеры на карту.

        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
             var ssilka = markers[i].getAttribute("ssilka");
             var images = markers[i].getAttribute("images");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, ssilka,  images, type);
            map.addOverlay(marker);
          }
        });

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

После этого мы создаем маркеры и информационные окна.

Вы должны поместить весь код, который необходим для создания маркеров в функцию createMarker. Так как массив customIcons был определен глобально, то мы без помех можем передавать его элементы конструктору класса GMarker. Затем нужно написать HTML-код, который будет отображаться в инфо-окне.

 function createMarker(point, name, address, ssilka,  images, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html ='<div style="width: 250px;"><b>' + name +'</b> <br/>' + address+'<br/><img src="'+images+'" with="200"/><br/><a href="'+ssilka+'" target="_blank"/>На сайт</a></div>';
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

Полный код для вывода карты:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
    <title>Пример вывод данных из базы на карту Google, используя XML-вариант-2</title>
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"
            type="text/javascript"></script> 
 
    <script type="text/javascript">
 //<![CDATA[
 
    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);
 
    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);
 
    var iconGreen = new GIcon(); 
    iconGreen.image = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
    iconGreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconGreen.iconSize = new GSize(12, 20);
    iconGreen.shadowSize = new GSize(22, 20);
    iconGreen.iconAnchor = new GPoint(6, 20);
    iconGreen.infoWindowAnchor = new GPoint(5, 1)
 
    var customIcons = [];
    customIcons["kinoteatr"] = iconBlue;
    customIcons["teatr"] = iconRed;
    customIcons["cafe"] = iconGreen;
 
 
 
  function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(56.31,44.01), 13);
 
        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
             var ssilka = markers[i].getAttribute("ssilka");
             var images = markers[i].getAttribute("images");
 
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, ssilka,  images, type);
            map.addOverlay(marker);
          }
        });
      }
    }
 
    function createMarker(point, name, address, ssilka,  images, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html ='<div style="width: 250px;"><b>' + name +'</b> <br/>' + address+'<br/><img src="'+images+'" with="200"/><br/><a href="'+ssilka+'" target="_blank"/>На сайт</a></div>';
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
  </script>
 
  </head>
 
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 800px; height: 600px"></div>
<p><a href="/?p=247" title="Организация вывода данных на карту Google Maps,  используя PHP и MySQL" target="_blank">Вернуться к тексту заметки</a></p>
  </body>
</html>

Загружаем нашу карту в браузере и наблюдаем

Щелкаем по одному из маркеров

Посмотреть пример в действии можно здесь

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

  2. Cергей

    Спасибо Вам за информацию.
    Вопрос такой:
    Вот если надо обработать GPX файл. Это обычный XML.
    Предполжим надо выбрать все точки, это делается элементарно с тегом <wpt
    Примерно так как Вы писали:
    ……
    GDownloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName("wpt");
    for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("lat");
    var address = markers[i].getAttribute("lon");
    и так далее…..
    Аналочино обрабатывается gpx в случаи с треками, но там другой тег, впрочем это сути не меняет.
    Я довольно быстро написал вывод собственных треков и точек на карты Google (через его API)
    C треками вообще проблем нет.
    Проблема небольшая с точками. Необходимо получить имя точки.
    Вот фрагмент GPX:

    2010-04-19T06:31:21Z
    001
    Waypoint

    SymbolAndName

    Видно что нужно имя в
    001
    Пока я тупо решаю проблему исправив в блакноте:

    То есть искуственно введя атрибут wpt
    Cпособ конечно варварский но верный 🙂
    К сожалению, потом такой исправленный файл не инпортируется в мапсоурце.
    Чего делать? Я просто не понимаю как средствами javaskript (если конечно это возможно) пропарсить xml и получить 001?
    В PHP подобная проблема решается несколько проще.

    Ответить ↓
  3. SuxxOn

    возможно ли таким же способом(с занесением точек ломаной в БД), выводить ломаные линии на карту? заранее, спс.

    Ответить ↓

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *