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 секунд какбы перегружается , и ничего больше не показывает. данные в БД заносятся.
Здравствуйте, не могли бы вы подсказать, как можно реализовать автоматически приближение карты при клике на маркер?
Головой понимаю, что надо связать событие клика с действием, но что-то не могу разобраться как конкретно…