<style>
#info {
float: left;
margin: 10px;
font: 12px 'Tahoma';
}
#address {
float: right;
margin: 10px;
font: 12px 'Tahoma';
}
.pp_content {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
<link rel="stylesheet" href="/JS/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="/JS/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
// Геокодинг метки
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
// получаем координаты метки
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
$('#puF4').val(latLng.lat()+','+latLng.lng()).attr('readonly','readonly');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
// собираем карту с новыми или старыми координатами
function initialize() {
var arr=$('#puF4').val().split(',')||false;
<?if($PAGE_ID$='add')?>
var latLng = new google.maps.LatLng(42.255819822727766, 18.891189521789556);
<?else?>
var latLng = new google.maps.LatLng(arr[0], arr[1]);
<?endif?>
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// ставим маркер
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// новое место маркера
updateMarkerPosition(latLng);
geocodePosition(latLng);
// перемещение вывод
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Перемещаем...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Перемещаем...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Переместили');
geocodePosition(marker.getPosition());
});
};
// вывод
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
opacity: 0.1,
show_title: false,
deeplinking: false,
social_tools: '',
gallery_markup: '',
custom_markup: '<div id="map_canvas" style="border-bottom: 1px solid black;width:820px; height:500px"></div><div id="titus"><div id="info"></div><div id="address"></div></div>',
changepicturecallback: function(){ initialize(); }
});
});
</script>
<a href="#?custom=true&width=820&height=500" title="" rel="prettyPhoto">Открыть карту Google</a>
<div style="display:none;" id="markerStatus"><i>Кликните и передвигайте маркер</i></div>
