Вы здесь

Шедевр от Google - Google Map

Всем привет!

Для начала, хочу извиниться за столь долгое мое отсутствие на сайте. Пригласили в крупный проект, какой - расскажу позже, когда работа будет завершена :) Пока лишь могу сказать, что пишу там сайт, сайт будет работать с картой от Google. О ней и хочу рассказать.

Думаю, многие слышали об этом сервисе от Гугла, многие даже частенько пользуются им. В их числе был и я: прикольно посмотреть на знакомые (да и незнакомые тоже) места с высоты. Но карта Гугла - это не просто снимки из космоса. Их команда проделала колоссальную работу! На карту нанесены названия всех улиц городов всех стран мира, для крупных городов в реальном режиме времени показываются пробки, можно просмотреть маршрут от одной точки до другой, предусмотрена возможность привязывать к местам мультимедиа-контент и многое-многое другое. Но кроме всего прочего, карту можно использовать в своих целях (правда согласно условиям пользования): строить сайты, на которых карта будет работать по вашим командам. Если вы давно мечтали сделать что-то этакое, то вперед! А я расскажу, с чего начать.

У карты есть прекрасный API, через который можно и работать. Но для начала вам нужно зарегистрироваться для получения уникального ключа, который будет использоваться при каждом обращении к карте.

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

http:⁄⁄maps.google.com/staticmap?center=55.03934,82.92768&zoom=14&size=512x512&5C&markers=55.03934,82.92768,blue%7C55.04934,82.92768,greeng&key=MAPS_API_KEY

где:
center=55.03934,82.92768 - координаты точки, на которую карта будет центрироваться;
zoom=14 - масштаб карты (возможен от 0 (вся планета) до 17)
size=512x512 - размер изображения в пикселях;
maptype=mobile - тип карты, в данном случае для мобильных устройств. По умолчанию идет как roadmap - обычный вид, можно упустить его;
markers=55.03934,82.92768,blues%7C55.04934,82.92768,greeng - координаты точек на карте и соответствующих им маркеров
&key=MAPS_API_KEY - ключ, который вы получите при регистрации.

По такой ссылке Гугл выдаст нам картинку такую вот:

Неплохо, неправда ли? Подробнее по статическим картам можно почитать здесь.

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

Работа с API карт через JavaScript начинается с трех простых шагов:

1. Подключения скрипта,
2. Инициализации карты
3. Определения места, куда нужно выводить карту и собственно ее вывода. Вот как это будет выглядеть в коде:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html</a> xmlns="<a href="http://www.w3.org/1999/xhtml">
">http://www.w3.org/1999/xhtml">
</a>  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Пример API Карт Google на языке JavaScript </title>
    <script src="<a href="http://maps.google.com/maps?file=api&v=2&key=abcdefg"">http://maps.google.com/maps?file=api&v=2&key=abcdefg"</a> 
              type="text/javascript"></script>
<script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
       map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
  </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

Если этот текст сохранить как html и открыть в браузере, вы увидите вот это. Такую карту уже можно двигать, приближать/уменьшать, менять вид с карты на вид из космоса или комбинированный...

Я не буду рассказывать обо всех возможностях карты, т.к. есть неплохая документация по API, а также целая галерея примеров (из которых вы можете преспокойно брать код и вставлять себе на сайт), рекомендую посетить ее и посмотреть, насколько широки возможности карт и полезные ссылки.

А я лучше раскажу, как связать MySQL базу и карту. Придумал это не я, на авторство не претендую, но найти эту информацию довольно сложно, а сходу разобраться - непросто.

Создайте в MySQL табличку запросом:

CREATE TABLE `markers` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 60 ) NOT NULL ,
`address` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL ,
`type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

В ней будет информация по названию, адресу, координатам и типу объектов. Заполните ее.

Для работы с базой создаем пару php-файликов и собственно сам скрипт:

phpsqlajax_dbinfo.php для задания в нем настроек подключения к базе, и прописываем в нем логин, пароль и имя базы (также можно и MySQL-сервер прописать здесь):

<?php
  $username="user";
  $password="12345";
  $database="map";
?>

и phpsqlajax_genxml.php для выдергивания информации из базы и передачи ее JavaScript:

<?php
    require("phpsqlajax_dbinfo.php");    //подключили файл с настройками базы
 
    function parseToXML($htmlStr)
    {
        $xmlStr=str_replace('<','<',$htmlStr);
        $xmlStr=str_replace('>','>',$xmlStr);
        $xmlStr=str_replace('"','"',$xmlStr);
        $xmlStr=str_replace("'","'",$xmlStr);
        $xmlStr=str_replace("&",'&',$xmlStr);
        return $xmlStr;
    }
 
    // Открываем соединение с MySQL-сервером
    $connection=mysql_connect ('localhost', $username, $password);
    if (!$connection) 
    {
        die('Нет соединения : ' . mysql_error());
    }
 
    // Устанавливаем соединение с БД
    $db_selected = mysql_select_db($database, $connection);
    if (!$db_selected) 
    {
        die ('Невозможно использовать БД : ' . mysql_error());
    }
 
    // Выборка всех записей из таблицы markers
    $query = "SELECT * FROM markers ORDER BY id";
    $result = mysql_query($query);
    if (!$result) 
    {
        die('Неверный запрос: ' . mysql_error());
    }
 
    header("Content-type: text/xml");
 
    // Создание XML-кода, вывод родительского элемента
    echo '<markers>';
 
    // Цикл прохода по всем выбранным записи; создание узла для каждой
    while ($row = @mysql_fetch_assoc($result))
 
    {
        // Вывод нового узла XML
        echo '<marker ';
        echo 'dev_id="' . $row['dev_id'] . '" ';
        echo 'date="' . parseToXML($row['date']) . '" ';
        echo 'time="' . parseToXML($row['time']) . '" ';
        echo 'lat="' . $row['lat'] . '" ';
        echo 'lng="' . $row['lng'] . '" ';
        echo '/>';
    }
 
    // Конец XML-файла
    echo '</markers>';
?>

Сохраняем файлы в одну папку и к ним же сохраняем файл index.html со скриптом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html</a> xmlns="<a href="http://www.w3.org/1999/xhtml"">http://www.w3.org/1999/xhtml"</a> xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=koi-8"/>
    <title>Начало работы с Google Map</title>
    <script src="<a href="http://maps.google.com/maps?file=api&v=2&sensor=true&key=abcdef"">http://maps.google.com/maps?file=api&v=2&sensor=true&key=abcdef"</a> 
              type="text/javascript"></script>
    <script type="text/javascript">
        //Инициализация карты
        function initialize() 
        {
            if (GBrowserIsCompatible()) 
            { //проверяем браузер на совместимость
                var map = new GMap2(document.getElementById("map_canvas")); // создаем новую карту
                GDownloadUrl("phpsqlajax_genxml.php", function(data) 
                {  // делаем запрос в базу через php файл и  полученные данные присваиваем  переменной
                    var xml = GXml.parse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    for (var i = 0; i < markers.length; i++) 
                    {  // запускаем цикл по расстановке маркеров для точек из базы 
                        var time = markers[i].getAttribute("time");
                        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                                            parseFloat(markers[i].getAttribute("lng")));
                        var marker = new GMarker(point);
                        map.addOverlay(marker); // рисуем маркер на карте
                    }
                   map.setCenter(point, 13); // центрируем карту (обязательный метод) по последнему маркеру
                   // добавляем инструменты по работе с картой 
                   map.addControl(new GLargeMapControl());
                   map.addControl(new GScaleControl());
                   map.addControl(new GMapTypeControl());
                   map.addControl(new GOverviewMapControl());
                });
            }
        }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 100%; height: 100%; position: absolute; 
           background-color: rgb(229, 227, 223);"></div>
  </body>
</html>

Если теперь открыть в браузере файл index.html, то увидите карту с расставленными на ней маркерами в точках, которые прописаны в базе.

Вообще, маркеры, если их планируется много, а также если планируется работа с ними, лучше создавать не методом addOverlay, а через специальный иснтрумент - Диспетчер Маркеров (подробное описание (на английском) здесь).

Вот в принципе и все для начала. А дальше уже вникайте в описание команд (кстати там попадаются ошибки) и смотрите примеры :) Если будут вопросы - пишите в комменты, будем вместе разбираться :) Удачи!