codice:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Mappa</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<?php
include("variables.php");
$query_marker="SELECT * FROM markers";
mysql_connect($db_serv,$db_user,$db_pass);
@mysql_select_db($db_name) or die ('Impossible connetersi al database');
$result_markers=mysql_query($query_marker);
$markers_row=mysql_num_rows($result_markers);
for ($i = 0; $i <= $markers_row-1; $i++) {
$markers=mysql_fetch_array($result_markers,MYSQL_ASSOC);
$markers_lats[]=$markers["lat"];
$markers_lons[]=$markers["lng"];
$markers_text[]=$markers["name"].",\\n ".$markers["address"];
}
$markers_lats_average=(array_sum($markers_lats)/($markers_row));
$markers_lons_average=(array_sum($markers_lons)/($markers_row));
$dist_markers=calcola_distanza ($db_serv,$db_user,$db_pass,$db_name);
$zoom_markers=zoom_scale($dist_markers);
?>
<script type="text/javascript">
var markersArray = [];
var map;
var image = new google.maps.MarkerImage('../images/mm_20_red4_rid.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 27),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 27));
var shadow = new google.maps.MarkerImage('../images/mm_20_red4ombra_rid.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(5, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
function initialize() {
var latlng = new google.maps.LatLng( <?php echo $markers_lats_average; ?>, <?php echo $markers_lons_average; ?>);
var myOptions = {
zoom: <? echo $zoom_markers; ?>,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
<?php
$index=0;
foreach($markers_lats as $temp) {
echo " var markerPosition = new google.maps.LatLng( ".$temp.", ".$markers_lons[$index].");\n";
echo " var markerText = \"".$markers_text[$index]."\";\n";
echo " addMarker(markerPosition, markerText);\n";
$index++;
}
?>
showOverlays();
}
function addMarker(location, text) {
marker = new google.maps.Marker({
position: location,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: text
});
markersArray.push(marker);
}
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
function closeAll() {
window.close();
}
</script>
</head>
<body onload="initialize()" >
<center>[img]../images/miaImmagine.png[/img]</center>
<center> <INPUT type="button" value="close" onclick="closeAll()"></center>
<div align="center" id="map_canvas" style=" margin-left: auto; margin-right: auto; width:800px; height:600px"></div>
</body>
</html>