Скрипт Яндекс карт на сайте (геотагинг)

В данной статьей речь идет о таком удобном и наглядном интерфейсе как Яндекс.карты. Итак, перед нами стоит задача организовать на сайт отображение фирмы или любого другого объекта (например, объявление о недвижимости если у вас сайт или скрипт продажи недвижимости, место осмотра продаваемой машины на доске объявлений продажи авто, место для собеседования в скрипте работы и т.п.) на карте в виде метки «Я здесь».

Для начала нужно зарегистрироваться на сайте http://api.yandex.ru/maps для получения
индивидуального API-ключа. Данный ключ привязывается к домену и вставляется в код скрипта карт.

Предположим, что у нас есть доска объявлений о продаже недвижимости и нам надо поставить маркер на карте для каждого объекта. В личном разделе, где пользователь видит список добавленных объявлений, ставим около каждого объявления ссылку на страницу geo.php. Идентификатор объекта можно передать так: geo.php?texid=5.

Теперь добавляем в базу данных в таблицу объявлений следующие поля:

mysql_query("ALTER TABLE `advert` ADD `geolng` TEXT NOT NULL ;");
mysql_query("ALTER TABLE `advert` ADD `geolat` TEXT NOT NULL ;");
mysql_query("ALTER TABLE `advert`ADD `geozoom` TEXT NOT NULL ;");

Далее создаем файл geo.php следующего содержания:

<?
// тут шапка ваших страниц, код авторицации и другие функции сайта

$addanket=$_GET['addanket'];
$delanket=$_GET['delanket'];
$lng=$_GET['lng'];
$lat=$_GET['lat'];
$zoom=$_GET['zoom'];

// это добавление в базу данных о местонахождении
if ($addanket == 'yes')
{
$sql="update `advert` SET geolng='$lng',geolat='$lat',geozoom='$zoom' WHERE ID='$texid'";
$result=@mysql_query($sql,$db);
}

// это удаление из базы данных о местонахождении
if ($delanket == 'yes')
{
$sql="update `advert` SET geolng='',geolat='',geozoom='' WHERE ID='$texid'";
$result=@mysql_query($sql,$db);
}

// далее идет код генерации карты с нанесенным на нее маркером
$result = @mysql_query("SELECT * FROM `advert` WHERE ID = '$texid'");
while ($myrow=mysql_fetch_array($result)) {
$geolng=$myrow["geolng"];
$geolat=$myrow["geolat"];
$geozoom=$myrow["geozoom"];
}
?>

<head>

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ваш_API_ключ" type="text/javascript"></script>
<script type="text/javascript">
//Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
//Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
//Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(37.609217986464515, 55.75355904134578), 10);
var placemark = null;

<?
// в указанном выше коде используются координаты центра Москвы - 37.609217986464515, 55.75355904134578.
?>

<?
// если установлена метка, то выводим ее на карту
if ($geolng != '' and $geolat != '' and $geozoom != '')
{
?>

//Установка центра
map.setCenter(new YMaps.GeoPoint(<? echo "$geolng";?>, <? echo "$geolat";?>), <? echo "$geozoom";?>);
//Создание перетаскиваемой метки
placemark = new YMaps.Placemark(new YMaps.GeoPoint(<? echo "$geolng";?>, <? echo "$geolat";?>), {draggable: true, style: "default#redPoint"});
placemark.setIconContent("Я здесь!");
map.addOverlay(placemark);
//Установка слушателя события перетаскивания метки
YMaps.Events.observe(placemark, placemark.Events.Drag, function (obj) {
document.getElementById("lng").value = obj.getGeoPoint().getLng();
document.getElementById("lat").value = obj.getGeoPoint().getLat();
document.getElementById("zoom").value = map.getZoom();
});

<?
}
?>

// Ниже идет код генерации карты
//Ограничение масштабирования
map.setMinZoom(10);
//Элементы управления
map.addControl(new YMaps.Zoom({noTips:true}));
map.addControl(new YMaps.SearchControl(), new YMaps.ControlPosition(YMaps.ControlPosition.TOP_LEFT, new YMaps.Point(8, 5)));
//Масштабирование карты колесом прокрутки мыши
map.enableScrollZoom();
//Щелчок по карте
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
//Сохранение координат
document.getElementById("lng").value = mEvent.getGeoPoint().getLng();
document.getElementById("lat").value = mEvent.getGeoPoint().getLat();
document.getElementById("zoom").value = map.getZoom();
if (placemark==null){
//Создание перетаскиваемой метки
placemark = new YMaps.Placemark(mEvent.getGeoPoint(), {draggable: true, style: "default#bluePoint"});
placemark.setIconContent("Я здесь!");
map.addOverlay(placemark);
//Установка слушателя события перетаскивания метки
YMaps.Events.observe(placemark, placemark.Events.Drag, function (obj) {
document.getElementById("lng").value = obj.getGeoPoint().getLng();
document.getElementById("lat").value = obj.getGeoPoint().getLat();
document.getElementById("zoom").value = map.getZoom();
});
}else{
//Перемещение метки
placemark.setCoordPoint(mEvent.getGeoPoint());
}
}, this);
});
</script>

<?
// теперь вставляем форму и непосредственно выводим карту
<div id="YMapsID" style="width: 97%; height: 560px; border: 1px solid #CCCCCC;"><script type="text/javascript">document.write('Идет загрузка...<br><br>');</script></div>

<div align=center>
<table><tr>
<form method="get" style="margin: 0;">
<td>
<input type="hidden" name="zerolng" value="0">
<input type="hidden" name="zerolat" value="0">
<input type="hidden" name="texid" value="<? echo "$texid";?>">
<input type="hidden" name="delanket" value="yes">
<input type="submit" value="Удалить">
</td>
</form>

<form method="get" style="margin: 0;">
<td width=30> </td><td>
<input type="hidden" id="lng" name="lng" value="<? echo "$geolng";?>">
<input type="hidden" id="lat" name="lat" value="<? echo "$geolat";?>">
<input type="hidden" id="zoom" name="zoom" value="<? echo "$geozoom";?>">
<input type="hidden" name="addanket" value="yes">
<input type="hidden" name="texid" value="<? echo "$texid";?>">
<input type="submit" value="Сохранить">
</td>
</form>
</tr></table></div>

Вот и все. После нажатия кнопки «Сохранить» данные заносятся в базу и на карте делается отметка о местонахождении вашего объекта. Осталось сделать вывод карты в самом объявлении. Приводятся только фрагменты кода. Первый фрагмент можно вставить вверху файла:

// карта
$result = @mysql_query("SELECT * FROM $textable WHERE ID = '$link'");
// $link – это номер объявления

while ($myrow=mysql_fetch_array($result)) {
$geolng=$myrow["geolng"];
$geolat=$myrow["geolat"];
$geozoom=$myrow["geozoom"];
}

if ($geolng != '' and $geolat != '' and $geozoom != '')
{
?>

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=<? echo "$yandexapikey";?>" type="text/javascript"></script>
<script type="text/javascript">
//Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
//Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
//Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(37.609217986464515, 55.75355904134578), 10);
var placemark = null;

//Установка центра
map.setCenter(new YMaps.GeoPoint(<? echo "$geolng";?>, <? echo "$geolat";?>), <? echo "$geozoom";?>);
//Создание перетаскиваемой метки
placemark = new YMaps.Placemark(new YMaps.GeoPoint(<? echo "$geolng";?>, <? echo "$geolat";?>), {draggable: true, style: "default#redPoint"});
placemark.setIconContent("Я здесь!");
map.addOverlay(placemark);
//Установка слушателя события перетаскивания метки
YMaps.Events.observe(placemark, placemark.Events.Drag, function (obj) {
document.getElementById("lng").value = obj.getGeoPoint().getLng();
document.getElementById("lat").value = obj.getGeoPoint().getLat();
document.getElementById("zoom").value = map.getZoom();
});

//Ограничение масштабирования
map.setMinZoom(10);
//Элементы управления
map.addControl(new YMaps.Zoom({noTips:true}));
map.addControl(new YMaps.SearchControl(), new YMaps.ControlPosition(YMaps.ControlPosition.TOP_LEFT, new YMaps.Point(8, 5)));
//Масштабирование карты колесом прокрутки мыши
map.enableScrollZoom();
//Щелчок по карте
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
//Сохранение координат
document.getElementById("lng").value = mEvent.getGeoPoint().getLng();
document.getElementById("lat").value = mEvent.getGeoPoint().getLat();
document.getElementById("zoom").value = map.getZoom();
if (placemark==null){
//Создание перетаскиваемой метки
placemark = new YMaps.Placemark(mEvent.getGeoPoint(), {draggable: true, style: "default#bluePoint"});
placemark.setIconContent("Я здесь!");
map.addOverlay(placemark);
//Установка слушателя события перетаскивания метки
YMaps.Events.observe(placemark, placemark.Events.Drag, function (obj) {
document.getElementById("lng").value = obj.getGeoPoint().getLng();
document.getElementById("lat").value = obj.getGeoPoint().getLat();
document.getElementById("zoom").value = map.getZoom();
});
}else{
//Перемещение метки
placemark.setCoordPoint(mEvent.getGeoPoint());
}
}, this);
});
</script>

<?
}
// карта

И наконец в том месте где у вас выводятся данные о самом объявлении вставляете это:

<?
if ($geolng != '' and $geolat != '' and $geozoom != '')
{
?>
<div id="YMapsID" style="width: 450px; height: 400px; border: 1px solid #CCCCCC;"><script type="text/javascript">document.write('Идет загрузка...<br><br>');</script></div>
<?
}
?>

Невежин Евгений http://nevius.ru

ПОЛЕЗНО  Функция копирования папки с вложеными в нее папками и файлами произвольной вложености

 

  • Виктор

    В каком из разделов API-map нужно зарегистрироваться? JavaScript API или где? https://tech.yandex.ru/maps/

    • Roman NMSK

      раньше у них было одно API для всего, а сейчас пошло разделнее. скорее всего в JavaScript API нужно регистрироваться