<?php
// default zoom
$zoom = 11;
// default forum URL
$forum_url = 'http://www.southbayriders.com/forums/';
// default forum title
$forum_title = 'Forums';
// default view map title
$view_map = 'View Map';
?>
<html>
<title><?php echo $view_map;?></title>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
.breadcrumb {
padding: 0px 0px 10px 0px;
}
</style>
<?php
error_reporting(E_ALL & ~E_NOTICE);
// get coordinates from URL
$coordinates = $_GET['coordinates'];
?>
<script type="text/javascript">
var height = window.innerHeight - 20;
var map;
var geocoder;
var centerChangedLast;
var markersArray = [];
function initialize()
{
var latlng = new google.maps.LatLng(<?php echo $coordinates;?>);
var myOptions =
{
zoom: <?php echo $zoom;?>,
center: latlng,
scaleControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
setupEvents();
centerChanged();
addMarkerAtCenter();
}
function setupEvents()
{
var marker = new google.maps.Marker(
{
map: map,
icon: 'viewmap_crosshair.gif'
});
marker.bindTo('position', map, 'center');
google.maps.event.addListener(map, 'center_changed', centerChanged);
}
function getCenterLatLngText()
{
document.getElementById("latlng").className="coordinate";
return '[map=' + map.getCenter().lat().toFixed(6) +','+ map.getCenter().lng().toFixed(6) +']View Map[/map]';
}
function centerChanged()
{
centerChangedLast = new Date();
var latlng = getCenterLatLngText();
document.getElementById('latlng').innerHTML = latlng;
}
function geocode()
{
var address = document.getElementById("address").value;
geocoder.geocode({
'address': address,
'partialmatch': true}, geocodeResult);
}
function geocodeResult(results, status)
{
if (status == 'OK' && results.length > 0)
{
map.fitBounds(results[0].geometry.viewport);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
}
function addMarkerAtCenter()
{
marker = new google.maps.Marker(
{
position: map.getCenter(),
map: map
});
markersArray.push(marker);
}
function deleteOverlays()
{
if (markersArray)
{
for (i in markersArray)
{
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body onload="initialize()">
<div class="breadcrumb">
<a href="<?php echo $forum_url;?>"><?php echo $forum_title;?></a> > <?php echo $view_map;?>
</div>
<div id="map">
<div id="map_canvas" style="width:100%;"></div>
</div>
<script type="text/javascript">
var height = window.innerHeight;
height = height - 140;
document.getElementById("map_canvas").style.height = height + "px";
</script>
<br />
<div id="latlng"></div>
<br />
Find Place: <input id="address" type="text" size="50">
<input type="button" value="Go" onclick="geocode()">
<input type="button" value="Add Marker at Center" onclick="addMarkerAtCenter()">
<input type="button" onClick="deleteOverlays()" value="Remove Markers" title="Remove Markers">
</body>
</html>
получилось вот как.
