Pull to refresh

От инфо-окна к БД: сохраняем информацию, введенную пользователем

Reading time 6 min
Views 3.4K
Original author: Pamela Fox, Google Maps API Team

Отсебятина


Кросс-пост четвертого перевода туториалов по Google Maps из моего блога. В нем рассказывается о добавлении пользователем информации при помощи инфо-окна.

Эта третья статья, в которой мы будем пользоваться связкой из PHP и MySQL совместно с Google Maps API. Если Вы PHP-разработчик, то Вас могут заинтересовать две предыдущие статьи, в которых мы загружали маркеры из БД и создавали KML-файл.

Введение


Многие разработчики, использующие Google Maps API для создания своих приложений, дают пользователям возможность самим добавлять информацию на карту. Наиболее логичным выглядит следующий процесс добавления информации пользователем. Сначала он щелкает по карте, создавая тем самым маркер (или рисует линию, многоугольник); в месте щелчка (там, где установился маркер) появляется инфо-окно, в котором есть поля для ввода информации; пользователь заполняет эти поля и нажимает кнопку «Сохранить»; после щелчка по кнопке «Сохранить» инфо-окно закрывается. Такой метод используется на сервисе Мои Карты Google. В этом уроке мы расскажем, как Вы можете использовать этот метод в своих картах и как с помощью PHP сохранять введенную пользователем информацию в БД MySQL. Для понимания материала этого урока Вам необходим некоторый опыт работы с HTML/JavaScrip/Google Maps API. Желательно знание PHP и MySQL.
Этот урок разбит на следующие части:

Создание таблицы БД


Когда создаете таблицу, прежде всего, Вы должны уделить внимание параметрам lat (широта) и lng (долгота) карты. При текущей разрешающей способности Google Maps нам понадобятся только 6 цифр после десятичного знака. Чтобы свести дисковое пространство, занимаемое БД к минимуму, для значений lat (широты) и lng (долготы) рекомендуется выбрать тип данных FLOAT с параметром 10,6. Этот тип позволяет хранить до 6-ти знаков после запятой и до 4-х перед запятой, например -123,456789 градуса. Ваша таблица должна иметь поле id, которое будет первичным ключом для доступа к записям, а также – поле type, в котором будет записан тип заведения (ресторан или бар).
Если Вы предпочитаете создавать таблицы в БД с помощью phpMyAdmin, то ниже расположен скриншот создания таблицы:
picture
Если же Вы не имеете доступ к phpMyAdmin или отдаете предпочтение чистому SQL, то ниже приведен код SQL-запроса:
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


На этом шаге Вы должны заполнить пустую таблицу, которая называется markers. Для этого нужно написать небольшой код на PHP, при выполнении которого информация, помещенная в URL, будет записываться как строка в БД. Используемые функции должны работать как в PHP4, так и в PHP5. Если же Вы никогда не писали на PHP код, при выполнении которого происходит подключение к БД, то посетите php.net и почиатйте о функциях mysql_connect, mysql_select_db, my_sql_query, и mysql_error.
Во-первых, вынесем всю информацию о подключении к БД в отдельный файл. Ниже приведен PHP-код, в котором Вы должны прописать собственные имя пользователя, пароль и имя БД:
<?php
$username="username";
$password="password";
$database="username-databaseName";
?>

Теперь приступим к коду, при выполнении которого в таблицу БД будет добавляться строка с данными. Первая часть этого кода будет отвечать за выбор нужной информации из URL, а вторая – за подключение к БД и передачу в нее полученной информации с помощью запроса INSERT INTO. Если же в процессе обработки или отправки этих данных произойдут какие-нибудь ошибки, то на экран выведется сообщение, которое поможет Вам узнать, в чем проблема. Чтобы проверить правильность работы скрипта необходимо в URL добавить следующие параметры (name=, address=, lat=, lng=, type=): http://www.yoursite.com/?name=Best%20Bar%20Ever&address=123%20Main%20St&lat=-37.12345&lng=122.12345&type=bar.
Если на экран не было выведено сообщений об ошибке, то скрипт работает правильно. Только не забудьте удалить из таблицы БД строки, которыми Вы проверяли работоспособность скрипта.
А вот и код:
<?php
require("phpsqlinfo_dbinfo.php");

// Получаем данные из параметров URL
$name = $_GET['name'];
$address = $_GET['address'];
$lat = $_GET['lat'];
$lng = $_GET['lng'];
$type = $_GET['type'];

// Соединяемся с сервером 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());
}

// Вставляем пользовательские данные
$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('Неверный запрос: ' . mysql_error());
}

?>


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


Теперь, когда весь серверный код у нас готов, приступим к созданию самой карты. Если Вы никогда не работали с Google Maps API, то изучите, пожалуйста, основы.

Создаем маркеры и инфо-окна
После создания и отцентровки карты, Вы можете добавить события, которые будут происходить при клике мышкой по карте. Функция, которая будет выполняться при клике, будет создавать маркер по координатами щелчка и будет устанавливать свойство перетаскивания маркера в "true". Затем, при клике по самому маркеру, будет открываться инфо-окно. В этом окне будет содержаться HTML-форма с полями для заполнения, выпадающим списком и кнопкой «Save». Каждый элемент нашей формы будет иметь атрибут id, и, когда мы кликнем по кнопке «Save», сработает функция saveData, описанная ниже.

Сохраняем данные
Функция saveData, запускаемая кликом по кнопке «Save», будет выполнять нижеперечисленные действия:
  • Сохранять значения координат маркера и значения заполненных полей формы;
  • Конструировать URL;
  • Помещать новый URL в качестве первого параметра функции GDownloadUrl;
  • Проверять, что статус-код, возвращенный функцией GDowloadUrl, равен 200. Это означает, что все данные были успешно переданы;
  • Проверять длину получившейся строки с данными. Если все нормально, то будет выводится сообщение о том, что информация добавлена.
Вот и 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 JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=YOUR_KEY"
type="text/javascript"></script>
<script type="text/javascript">

var marker;

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

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>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";

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 = "Location added.";
}
});
}
</script>

</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>

</html>

picture

Что еще можно сделать
Теперь, когда пользователи Вашей карты могут добавлять на нее информацию, перед Вами открывается несколько интересных возможностей:
  • Пусть пользователи рисуют многоугольники на Вашей карте, отмечая тем самым какие-либо регионы. Об этом будет рассказано в других уроках;
  • Пользователи могут ставить оценки понравившимся местам на карте;
  • Можно выводить всю пользовательскую информацию на карту.
Tags:
Hubs:
+6
Comments 11
Comments Comments 11

Articles