Google Maps – добавление меток на карту пользователями.

Автор: | 16.08.2009

Google Maps — добавление меток на карту пользователями.

В нескольких заметках на этом блоге я уже рассказывал о том, как реализовать возможность добавления меток пользователями на Яндекс.Карту (см. заметки: "Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями", "Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями – Продолжение" и "Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями – Продолжение-2").

В этой заметке я хочу описать, как реализовать  тоже самое для карт Google.

Для записи значений мы будем использовать язык PHP, а для хранения базу данных MySQL.

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

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

CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 255 ) NOT NULL ,
  `address` VARCHAR( 255 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `type` VARCHAR( 255 ) NOT NULL
) ENGINE = MYISAM DEFAULT CHARSET=utf8;

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

После этого мы создадим два файла на языке PHP — phpsqlinfo_dbinfo.php для соединения с базой данных и phpsqlinfo_addrow.php для добавления введенной информации в таблицу markers.

Код файла phpsqlinfo_dbinfo.php:

<?php

<?php
 
$sdb_name = "localhost";
$user_name = "usergmap";
$user_password = "gmap123";
$db_name = "gmap_bd";
 
// соединение с сервером базы данных
if(!$link = mysql_connect($sdb_name, $user_name, $user_password))
{
  echo "<br>Не могу соединиться с сервером базы данных<br>";
  exit();
}
 
// выбираем базу данных
if(!mysql_select_db($db_name, $link))
{
  echo "<br>Не могу выбрать базу данных<br>";
  exit();
}
 
mysql_query('SET NAMES utf8');
 
?>

Код файла phpsqlinfo_addrow.php:

<?php
require("phpsqlinfo_dbinfo.php");
 
function utf8_urldecode($str) {
    $str = preg_replace("/%u([0-9a-f]{3,4})/i","&#x\1;",urldecode($str));
    return html_entity_decode($str,null,'UTF-8');
  }
 
// Gets data from URL parameters
$name = utf8_urldecode($_GET['name']);
$address = utf8_urldecode($_GET['address']);
$lat = $_GET['lat'];
$lng = $_GET['lng'];
$type = $_GET['type'];
 
// Insert new row with user data
$query = sprintf("INSERT INTO markers " .
         " (id, name, address, lat, lng, type ) " .
         " VALUES (NULL, '%s', '%s', '%s', '%s', '%s');",
         mysql_real_escape_string($name),
         mysql_real_escape_string($address),
         mysql_real_escape_string($lat),
         mysql_real_escape_string($lng),
         mysql_real_escape_string($type));
 
$result = mysql_query($query);
 
if (!$result) {
  die('Invalid query: ' . mysql_error());
}
 
?>

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

Файл будет носить название phpsqlinfo_add.html

В начале, мы создаем карту и задаем ее центр, также добавляем элементы управления на карту.

Затем добавляем две функции, функция слушателя событий GEvent.addListener и функция записи данных saveData.

Подробнее о событиях можно узнать здесь.

В функции обратного вызова GEvent.addListener по событию click создается маркер с координатами, в точке клика. Свойство перетаскивания маркера draggable, устанавливается в состояние true.

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

Форма имеет следующие поля: наименование, адрес, тип и кнопку «Сохранить».

По нажатию на кнопку «Сохранить» вызывается функция saveData.

В ней сохраняем все значения полей и координаты точки.

Формируем URL ссылки с параметрами.

Помещаем новый URL в качестве первого параметра функции GDownloadUrl.

Проверяем, что статус-код, возвращенный функцией GDowloadUrl, равен 200. Это означает, что все данные были успешно переданы.

Проверяем длину получившейся строки с данными. Если все нормально, то выводится сообщение о том, что информация добавлена.

Код файла phpsqlinfo_add.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps - добавление меток пользователями</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"
type="text/javascript"></script>
<script type="text/javascript">
 
var marker;
 
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(56.32811,44.0), 15);
              map.addControl(new GLargeMapControl());
         map.addControl(new GMapTypeControl());
 
        GEvent.addListener(map, "click", function(overlay, latlng) {
          if (latlng) {
            marker = new GMarker(latlng, {draggable:true});
            GEvent.addListener(marker, "click", function() {
              var html = "<table>" +
                         "<tr><td>Наименование:</td> <td><input type='text' id='name'/> </td> </tr>" +
                         "<tr><td>Адрес:</td> <td><input type='text' id='address'/></td> </tr>" +
                         "<tr><td>Тип:</td> <td><select id='type'>" +
                         "<option value='bar' SELECTED>Бар</option>" +
                         "<option value='restaurant'>Ресторан</option>" +
                         "<option value='cafe'>Кафе</option>" +
                         "</select> </td></tr>" +
                         "<tr><td></td><td><input type='button' value='Сохранить' onclick='saveData()'/></td></tr></form>";
 
              marker.openInfoWindow(html);
            });
            map.addOverlay(marker);
          }
        });
 
      }
    }
 
    function saveData() {
      var name = escape(document.getElementById("name").value);
      var address = escape(document.getElementById("address").value);
      var type = document.getElementById("type").value;
      var latlng = marker.getLatLng();
      var lat = latlng.lat();
      var lng = latlng.lng();
 
      var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                "&type=" + type + "&lat=" + lat + "&lng=" + lng;
      GDownloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
          marker.closeInfoWindow();
          document.getElementById("message").innerHTML = "Данные добавлены.";
        }
      });
    }
    </script>
 
  </head>
 
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 800px; height: 600px"></div>
    <div id="message"></div>
  </body>
 
</html>

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

При написании этой заметки использовались следующие источники:

«ОТ ИНФО-ОКНА К БАЗЕ ДАННЫХ: СОХРАНЯЕМ ИНФОРМАЦИЮ, ВВЕДЕННУЮ ПОЛЬЗОВАТЕЛЕМ»

«From Info Windows to a Database: Saving User-Added Form Data»

В продолжении данной заметки мы научимся выводить данные из базы на карту.

 

Google Maps – добавление меток на карту пользователями.: 23 комментария

  1. alex

    не работает, при клиеке не высвечивается форма с добавлением имени, адрес и т.д. ?

  2. alex

    все равботает. немного подифицировал чтобы окно открывалось сразу после дропа маркера
    настройки базы в файле …dbinfo.php тоже забыл вначале сделать

  3. Anna

    скопировала все ваши файл на локалхост — не работает…

    и в вашей версии, при нажатии на маркер (уже когда добавлено) — ничего не происходит.. так должно быть?

    или должны быть показаны данные, что находится на этом месте?

    1. admin Автор записи

      Метка просто добавляется в базу данных. Вы на локальном компьютере таблицу создали в базе данных?

  4. Anna

    при точной копии ваших файлов
    у меня не работает кнопка «сохранить»…

  5. Anna

    я поняла! на localhost не работает!

    на хостинге все ок.

    спасибо.

  6. Артем

    А как можно реализовать загрузку файла изображения в балуне? Чтобы еще и изображение ресторана или кафе могли пользователи грузить…
    С html все понятно, нужно поле file, но что писать в action для формы…

  7. velobelarus

    Добрый день
    Как реализовать добавление только одной метки (т.е. вновьпоставленная метка отменяет ранее уставнленную, если она конечно не сохранена) а не нескольких, и чтобы форма сразу появлялась при уставовке метки, а не после уставки и последующем клике на метку?

  8. Ирина

    Добрый день.
    А куда загружать созданные файлы? И можно ли использовать эти наработки в карте доски объявлений AdsManager?

    1. admin Автор записи

      Для использования нужно модифицировать плагин Google Maps для компонента AdsManager

  9. Рыбачка Соня

    Не пойму подскажите, что есть что:
    $user_name = «usergmap»;
    $user_password = «gmap123»;
    $db_name = «gmap_bd»;

    1. admin Автор записи

      Это переменные для соединения с базой данных MySQL: $db_name — имя базы данных, $user_name — имя пользователя (логин), $user_password — пароль

  10. Ольга Гизатуллина

    Здравствуйте! Подскажите — не могу понять, где подвох. При полной копии ваших файлов, на форме и в title выводит кракозябры. Если указать вместо русского на английском — все ok. Я понимаю, что что-то с кодировкой, но где?

    1. admin Автор записи

      Нужно проверить в какой кодировке сохранены файлы, надо в UTF-8.
      И еще иногда, особенно на локальном компьютере, при передачи данных из php-скрипта неверно распознается кодировка.
      Для исправления нужно в самом начале php-скрипта добавить код:

      header('Content-Type: text/html; charset=utf-8');

      передать заголовок с кодировкой

  11. mantgomery

    Если добавить несколько маркеров, то при открытии infowindow для любого маркера открывается infowindow последнего добавленного маркера, а не того для которого открываем.

  12. mantgomery

    Исправил это установкой marker.set(«id», index);
    а при клике на infowindow получал var id = this.get(«id»);
    и по этому индексу ставил уже
    arrInfoWindows[id].open(map, arrMarkers[id]);

  13. Алексей

    Здравствуйте я пытаюсь на свой сайт http://fs-messi.do.am/ добавить гугл мап,чтобы там была возможность пометок, получил ключ…скопировал ваш последний код сохранил попросило ключ…заменил ваш на свой…сохранил,ключ не попросило,но ничего не появляется 🙁

  14. Игорь

    Уважаемый ADMIN, сделал все по вашейй статье. Но возникла проблема.
    Карта грузится, только через 4-5 секунд какбы перегружается , и ничего больше не показывает. данные в БД заносятся.

  15. Александр

    Здравствуйте, не могли бы вы подсказать, как можно реализовать автоматически приближение карты при клике на маркер?
    Головой понимаю, что надо связать событие клика с действием, но что-то не могу разобраться как конкретно…

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

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