Готовые скрипты и сайты NEVIUS

Гугл карты на вашем сайте

В статье Скрипт Яндекс карт на сайте мы ранее писали о вставке карт на сайт для отображения фирмы или другого адреса на карте Yandex. Теперь поговорим о том, как сделать то же самое с помощью сервиса Google.maps.
В отличии от старого сервиса Яндекс.карт, где требовалось получать специальный API-ключ для конкретного домена, здесь этого делать не нужно. Поэтому сразу переходим к разбору кода.
Итак, предположим, у нас есть сайт знакомств, на котором требуется сделать отметку анкеты на карте. В личном разделе создаем файл отметки местоположения на карте. Назовем его geo.php. Авторизацию и другие функции в данной статье мы рассматривать не будем. Таблица с анкетами у нас будет задана в переменной $textable. В базе данных для таблицы $textable должны быть добавлены следующие строки:
geolng TEXT NOT NULL,
geolat TEXT NOT NULL,
geozoom TEXT NOT NULL,

Основной код находится между тегами <head></head>:

// подключаемся к базе данных
$db=mysql_connect($bdhost,$bdlogin,$bdpass);
mysql_select_db($bdname,$db);

// получаем нужные переменные
if ($_GET['texid'] == '') {$texid=$_POST['texid'];}
elseif ($_GET['texid'] != '') {$texid=$_GET['texid'];}
$addanket=$_GET['addanket'];
$lng=$_GET['lng'];
$lat=$_GET['lat'];
$zoom=$_GET['zoom'];
$delanket=$_GET['delanket'];

// обновляем базу данных, если нажата кнопка «Сохранить», то есть выставляется отметка на карту
if ($addanket == 'yes')
{
$sql="update $textable SET geolng='$lng',geolat='$lat',geozoom='10' WHERE ID='$texid'";
$result=@mysql_query($sql,$db);
}

// это удаление отметки с карты, когда нажата кнопка «удалить»
if ($delanket == 'yes')
{
$sql="update $textable SET geolng='',geolat='',geozoom='' WHERE ID='$texid'";
$result=@mysql_query($sql,$db);
}

// получаем переменные широты, долготы и зума из базы данных (если они установлены)
$result = @mysql_query("SELECT * FROM $textable WHERE ID = '$texid'");
while ($myrow=mysql_fetch_array($result)) {
$geolng=$myrow["geolng"];
$geolat=$myrow["geolat"];
$geozoom=$myrow["geozoom"];
}

?>

<style>
#map-canvas {
width: 90%;
height: 600px
}
</style>
<?
// подключаем скрипт гугла
?>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

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

<script>
var map;
var markers = [];

function initialize() {
var myLatlng = new google.maps.LatLng(55.74412,37.614441);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);

document.getElementById('lat').value = marker.position.lat(); // переписываем широту
document.getElementById('lng').value = marker.position.lng(); // и долготу

});
}

// Add a marker to the map and push to the array.

function addMarker(location) {

clearOverlays();
markers = [];

marker = new google.maps.Marker({
position: location,
map: map
});

markers.push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);

}
}

// Removes the overlays from the map, but keeps them in the array.
function clearOverlays() {
setAllMap(null);
}

// Shows any overlays currently in the array.
function showOverlays() {
setAllMap(map);
}

// Deletes all markers in the array by removing references to them.
function deleteOverlays() {
clearOverlays();
markers = [];
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
<?
} // нет координат

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

<script>
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(<? echo "$geolat,$geolng";?>);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ''
});

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<?
} // есть координата
?>

Следующий код выводим между тегами <body></body>:
<div id="map-canvas"></div>

<div align=center>
<br><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>

Тут должно быть все ясно. Первая форма удаляет сделанную отметку, вторая сохраняет. Теперь данные об отметке на карте должны быть записаны в базу данных. Осталось вывести все это в анкете пользователя. Будем выводить это в файле link.php.
Между тегами <head></head> добавляем код гугл.карт:
<style>
#map-canvas {
width: 90%;
height: 600px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

// получаем сохраненные широту, долготу и масштаб из базы данных
<?
$result = @mysql_query("SELECT * FROM $textable WHERE ID = '$link'");
while ($myrow=mysql_fetch_array($result)) {
$geolng=$myrow["geolng"];
$geolat=$myrow["geolat"];
$geozoom=$myrow["geozoom"];
}

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

<script>
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(<? echo "$geolat,$geolng";?>);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ''
});

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<?
}
?>

Осталось в нужном месте анкеты вывести саму карту. Делается это такой строкой:
<div id="map-canvas"></div>

Вот и все. Данную функцию можно использовать в любых сервисах. В доске объявлений для отметки места осмотра, в бирже труда для указания места работы, в каталоге фирм для указания адреса фирмы и т.п. Можно также расширить функционал скрипта, сделать общую карту всех отметок, модифицировать маркеры, вывести схему проезда – все эти и другие функции предлагает сервис Гугл.Карты.

При перепечатке информации ссылка на сайт http://nevius.ru обязательна.

Гугл карты на вашем сайте

nevius.ru

Разработка скриптов

Разработка сайтов

Информация