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»
В продолжении данной заметки мы научимся выводить данные из базы на карту.
Где продолжение??? требую продолжение!!!
Спасибо, отличная информация по картам
не работает, при клиеке не высвечивается форма с добавлением имени, адрес и т.д. ?
все равботает. немного подифицировал чтобы окно открывалось сразу после дропа маркера
настройки базы в файле …dbinfo.php тоже забыл вначале сделать
скопировала все ваши файл на локалхост — не работает…
и в вашей версии, при нажатии на маркер (уже когда добавлено) — ничего не происходит.. так должно быть?
или должны быть показаны данные, что находится на этом месте?
Метка просто добавляется в базу данных. Вы на локальном компьютере таблицу создали в базе данных?
да, на localhost
при точной копии ваших файлов
у меня не работает кнопка «сохранить»…
я поняла! на localhost не работает!
на хостинге все ок.
спасибо.
А как можно реализовать загрузку файла изображения в балуне? Чтобы еще и изображение ресторана или кафе могли пользователи грузить…
С html все понятно, нужно поле file, но что писать в action для формы…
Добрый день
Как реализовать добавление только одной метки (т.е. вновьпоставленная метка отменяет ранее уставнленную, если она конечно не сохранена) а не нескольких, и чтобы форма сразу появлялась при уставовке метки, а не после уставки и последующем клике на метку?
Добрый день.
А куда загружать созданные файлы? И можно ли использовать эти наработки в карте доски объявлений AdsManager?
Для использования нужно модифицировать плагин Google Maps для компонента AdsManager
Не пойму подскажите, что есть что:
$user_name = «usergmap»;
$user_password = «gmap123»;
$db_name = «gmap_bd»;
Это переменные для соединения с базой данных MySQL: $db_name — имя базы данных, $user_name — имя пользователя (логин), $user_password — пароль
Здравствуйте! Подскажите — не могу понять, где подвох. При полной копии ваших файлов, на форме и в title выводит кракозябры. Если указать вместо русского на английском — все ok. Я понимаю, что что-то с кодировкой, но где?
Нужно проверить в какой кодировке сохранены файлы, надо в UTF-8.
И еще иногда, особенно на локальном компьютере, при передачи данных из php-скрипта неверно распознается кодировка.
Для исправления нужно в самом начале php-скрипта добавить код:
header('Content-Type: text/html; charset=utf-8');передать заголовок с кодировкой
Спасибо, отличная информация.
Если добавить несколько маркеров, то при открытии infowindow для любого маркера открывается infowindow последнего добавленного маркера, а не того для которого открываем.
Исправил это установкой marker.set(«id», index);
а при клике на infowindow получал var id = this.get(«id»);
и по этому индексу ставил уже
arrInfoWindows[id].open(map, arrMarkers[id]);
Здравствуйте я пытаюсь на свой сайт http://fs-messi.do.am/ добавить гугл мап,чтобы там была возможность пометок, получил ключ…скопировал ваш последний код сохранил попросило ключ…заменил ваш на свой…сохранил,ключ не попросило,но ничего не появляется
Уважаемый ADMIN, сделал все по вашейй статье. Но возникла проблема.
Карта грузится, только через 4-5 секунд какбы перегружается , и ничего больше не показывает. данные в БД заносятся.
Здравствуйте, не могли бы вы подсказать, как можно реализовать автоматически приближение карты при клике на маркер?
Головой понимаю, что надо связать событие клика с действием, но что-то не могу разобраться как конкретно…