ho cercato di eliminare tutto il surfluo...qui presento una pagina html divisa nella parte superiore con una foto e alcuni dati quali ora e login.
Invece sotto nella parte sinistra della pagina si triva il menu di navigazione e a destra si trova il contenuto vero e proprio ossia la mappa di google.
La divisione della pagine è fatta con le tabelle...
codice:
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6RTTBIXYxl1BcLZ-LhpuEhSXbh367pNkN425pMhdQW9VGazMQBS6EBtbFftRC2YxOm6wQdeXu9p5Tw" type="text/javascript"></script>
<link href="../geoweb/stile/main.css" rel="stylesheet" type="text/css" />
<link href="stile/menu.css" rel="stylesheet" type="text/css" />
<script src="../geoweb/javascript/main.js"></script>
<script src="javascript/menu.js"></script>
<link rel="stylesheet" type="text/css" href="../geoweb/stile/epoch_styles.css" />
<script type="text/javascript" src="../geoweb/javascript/epoch_classes.js"></script>
</head>
<body onunload="GUnload()">
<table id="tabella_main">
<tr>
<td colspan="2" id="intestazione">
[img]../prova/img/valle.jpg[/img]
<table align="right" id="data-ora">
<tr>
<td>Giovedì, 25 Giugno 2009</td><td id="ora"></td>
</tr>
<tr><td>Utente: <font color="blue">irpi</font></td>
<tr><td>Logout</td></tr></tr>
</table> </td>
</tr>
<tr>
<td id="colonna_opzioni">
<table id="tabella_opzioni">
<tr>
<td>Home</td>
</tr>
<tr>
<td>Inserisci</td>
</tr>
<tr>
<td>Cerca</td>
</tr>
<tr>
<td>Modifica</td>
</tr>
<tr>
<td>Strumentazione</td>
</tr>
<tr><td>Utenti</td></tr>
</table>
</td>
<td id="colonna_contenuto">
<div id="map" style="width: 550px; height: 450px; border: 1px solid #000000;" ></div>
<script type="text/javascript">
//<![CDATA[
//the original code had a GMapSidebar to pick the markers from, I eliminated the GMapSidebar,
//but deleting the code that referenced the bar corrupted the rest of the code
//so just ignore references to GMapSidebar, unless you're really with JavaScript
if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventually be placed in the GMapSidebar
var GMapSidebar_html = "";
// arrays to hold copies of the markers and html used by the GMapSidebar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
var i = 0;
// arrays to hold variants of the info window html with get direction forms open
var to_htmls = [];
var from_htmls = [];
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
// The info window version with the "to here" form open (The Directions Form part.)
to_htmls[i] = html + '
Indicazioni stradali: punto di arrivo - punto di partenza' +
'
Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
'<input type="text" size=40 maxlength=40 name="saddr" id="saddr" value="" />
' +
'<input value="Get Directions" TYPE="submit">' +
'<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
// "(" + name + ")" +
'"/>';
// The info window version with the "to here" form open
from_htmls[i] = html + '
Indicazioni stradali: punto di arrivo - punto di partenza' +
'
End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
'<input type="text" size=40 maxlength=40 name="daddr" id="daddr" value="" />
' +
'<input value="Get Directions" type="SUBMIT">' +
'<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
// "(" + name + ")" +
'"/>';
// The inactive version of the direction info
html = html + '
Indicazioni stradali: punto di arrivo - punto di partenza';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the GMapSidebar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the GMapSidebar html
GMapSidebar_html += '' + name + '
';
i++;
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
// functions that open the directions forms
function tohere(i) {
gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}
function fromhere(i) {
gmarkers[i].openInfoWindowHtml(from_htmls[i]);
}
//*******************************************************************
//Edit these options to CONFIGURE THE MAP
// create the map
var map = new GMap2(document.getElementById("map"));
//GLargeMapControl adds large zoom and pan controls on the left,
//you can change it by picking from two of the options described below
//there is a GSmallMapControl for a smaller pan/zoom control
//also there is GSmallZoomControl - a small zoom control (no panning controls)
map.addControl(new GLargeMapControl());
//this adds the Map, Satellite, and Hybrid buttons, delete line if you don't want it
map.addControl(new GMapTypeControl());
//this adds a scale to the bottom left of the map, delete line if you don't want it
map.addControl(new GScaleControl());
//type in the Geo Coordinates and default zoom level below. (Latitude, Longitude), Zoom level);
//these Coordinates set the center of the map, they do not place the marker.
//that is done in the map.xml file. If you want a marker to be centered, type
//the same coordinates here that are used for that marker in the map.xml file
//0 is zoomed all the way out.
//map.setCenter(new GLatLng(42.350698,13.399934), 12);
//*******************************************************************
// Read the data from map.xml
var request = GXmlHttp.create();
//gli passo il path del sito così posso passargli un nuovo parametro ad ogni richiesta ecosi explorer pensa che sia una nuova richiesta, altrimenti va a leggere da cache e non ricarica immagine
request.open("GET", "http://geoserver3/geoweb2/map.xml?par="+Math.random().toString(), true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
map.addOverlay(marker);
map.setCenter(new GLatLng(lat,lng), 12);
}
// put the assembled GMapSidebar_html contents into the GMapSidebar div
document.getElementById("GMapSidebar").innerHTML = GMapSidebar_html;
}
}
request.send(null);
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</td>
</tr>
</table>
</body>
</html>
Rispondi quotando
