PDA

View Full Version : [JavaScript] Problema ad aggiungere punti di interesse a GoogleMap

D4rkAng3l
06-01-2008, 09:51
Ho inserito una mappa e dei punti di interesse, se clickate sui punti di interesse si apre un fumetto contenente una descrizione testuale della zona. La descrizione è un po' lunga e va fuori al fumetto...vorrei avere fumetti un po' più alti che riescano a contenere tutto il testo,è possibile?
La pagina è questa:
http://www.siatec.net/andrea/archivio/casavacanze/dovesiamo.html

ed il codice è:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<meta name="author" content="Andrea Nobili http://www.siatec.net/andrea/fotografia/" />
<link rel="stylesheet" type="text/css" href="default.css" media="screen" title="Esempio Sito Case Vacanze" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
<title>Esempio Sito Case Vacanze</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALgHsR4P4d7X_xjT6drMbhhSWWOPpqCtb0cp6_TTtdxQ2TwQu0RQHF0eqD6ZVcsKCWCqPvhEoXE1neg" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
function showMap()
{
if (GBrowserIsCompatible()) {

// Ottiene l'elemento della pagina chiamato "map" (il DIV)
// e crea la mappa utilizzandolo come contenitore.
var map = new GMap2(document.getElementById("map"));

// Aggiunge dei controlli per lo zoom e lo spostamento
map.addControl(new GSmallMapControl());

// Centra la mappa su Roma, con uno zoom di 5
map.setCenter(new GLatLng(37.505368,13.087463), 9);

// Crea un nuovo marker nel punto specificato
// con una descrizione HTML associata
function createMarker(point, description) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(description);
});
return marker;
}

map.addOverlay(
createMarker(new GLatLng(37.400165,13.282471), "<b>Eraclea Minoa:</b>Scavi archeologici di grane rilevanza<br>tra cui il teatro costruito alla fine del V secolo a.C, il<br>quartiere delle abitazioni ellenistiche e romane e<br>l'antiquarium che raccoglie reperti dell'abitato e della<br> necropoli, sono inoltre parzialmente visibili la cinta<br>muraria costruita tra la fine del VI e la fine del IV<br>secolo a.C., della lunghezza stimata di circa 6<br>chilometri e le 8 torri quadrate")
);

map.addOverlay(
createMarker(new GLatLng(37.602808,12.969017), "<b>Menfi:</b>Castello Svevo risalente al 1238<br>Torre Federiciana e palazzo baronale Pignatelli<br>Chiesa Madre dedicata a Sant'Antonio dio Padova<br>Chiesa di San Giuseppe del 1715<br>Chiesa di San Rocco del 1851<br>Scavi archeologici età del bronzo")
);

}
}
//]]>
</script>

</head>
<body onload="showMap();" onunload="GUnload()"><div id="wrap">
<div id="header"></div>

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">I luoghi e la natura</a></li>
<li><a href="#">Sciacca Terme</a></li>
<li><a href="#">Come Raggiungerci</a></li>
<li><a href="#">I nostri Trilocali</a></li>
<li><a href="#">Affitto Villetta</a></li>
<li><a href="#">Contatti</a></li>
</ul>

<div class="announce">
<p><span class="bold">Città:</span> Sciacca Terme</p>
<p><span class="bold">Stato:</span> Italia</p>
<p><span class="bold">Regione:</span> Sicilia</p>
<p><span class="bold">Nome abitanti:</span> Saccensi</p>
<p><span class="bold">Santo patrono:</span> Maria SS. del Soccorso</p>
<p><span class="bold">Giorno festivo:</span> 2 Febbraio</p>
<p><span class="bold">Prodotti tipici:</span> Olio, Vino, Prodotti ittici conservieri, Ceramica artistica</p>
</div>

<div class="announce">
<h3>Ultime Notizie:</h3>
<p><strong>Gennaio 15, 2007:</strong><br />
NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS.</p>
<p class="textright"><a href="index.html">Leggi il resto...</a></p>
</div>

</div>

<div id="extras">
<h3>Altre info:</h3>
<p>Potete contattarci telefonicamente al seguente numero: 000111222333</p>

<h3>Links utili:</h3>
<p>- <a href="http://it.wikipedia.org/wiki/Sciacca">Wiki Sciacca</a><br />
- <a href="http://ristoranti.saperviaggiare.it/sciacca-ristoranti.html">Ristoranti</a><br />
- <a href="http://www.yeaah.com/disco/DiscoDetails.asp?IDDisco=357">Discoteche</a><br />
- <a href="http://diving-centers.saperviaggiare.it/sciacca-diving-centers.html">Diving Center</a><br />
</p>

<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>

</div>

<div id="content">
<h2 class="testo">Dove siamo e cosa c'è intorno a noi:</h2>
<p class="testo">Questa sezione del sito oltre a mostrare la precisa localizzazione geografica e ad aiutarti a trovare la strada su come raggiungerci mette in evidenza anche i punti di interesse della zona di Sciacca Terme facilmente raggiungibili per scoprire il territorio e fare gite emozionanti ed indimenticabili</p>

<div id="map">
Your browser doesn't support Google Maps or Javascript is turned off.
</div>


</div>

<div id="footer">
Copyright &copy; 2007 Andrea Nobili WebMaster. Design by <a href="http://www.siatec.net/andrea/fotografia/">Andrea Nobili</a>.
</div>

</div>
</body>
</html>


Grazie
Andrea
isAlreadyInUse
06-01-2008, 10:22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<meta name="author" content="Andrea Nobili http://www.siatec.net/andrea/fotografia/" />
<link rel="stylesheet" type="text/css" href="default.css" media="screen" title="Esempio Sito Case Vacanze" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
<title>Esempio Sito Case Vacanze</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALgHsR4P4d7X_xjT6drMbhhSWWOPpqCtb0cp6_TTtdxQ2TwQu0RQHF0eqD6ZVcsKCWCqPvhEoXE1neg" type="text/javascript"></script>

<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
//<![CDATA[
function showMap()
{
if (GBrowserIsCompatible()) {

// Ottiene l'elemento della pagina chiamato "map" (il DIV)
// e crea la mappa utilizzandolo come contenitore.
var map = new GMap2(document.getElementById("map"));

// Aggiunge dei controlli per lo zoom e lo spostamento
map.addControl(new GSmallMapControl());

// Centra la mappa su Roma, con uno zoom di 5
map.setCenter(new GLatLng(37.505368,13.087463), 9);

// Crea un nuovo marker nel punto specificato
// con una descrizione HTML associata
function createMarker(point, description) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(description);
});
return marker;
}

map.addOverlay(
createMarker(new GLatLng(37.400165,13.282471), "<b>Eraclea Minoa:</b>Scavi archeologici di grane rilevanza<br>tra cui il teatro costruito alla fine del V secolo a.C, il<br>quartiere delle abitazioni ellenistiche e romane e<br>l'antiquarium che raccoglie reperti dell'abitato e della<br> necropoli, sono inoltre parzialmente visibili la cinta<br>muraria costruita tra la fine del VI e la fine del IV<br>secolo a.C., della lunghezza stimata di circa 6<br>chilometri e le 8 torri quadrate")
);

map.addOverlay(
createMarker(new GLatLng(37.602808,12.969017), "<div id='map' style='width: 300px; height: 180px;font-size:10px;'><b>Eraclea Minoa:</b>Scavi archeologici di grane rilevanza<br>tra cui il teatro costruito alla fine del V secolo a.C, il<br>quartiere delle abitazioni ellenistiche e romane e<br>l'antiquarium che raccoglie reperti dell'abitato e della<br> necropoli, sono inoltre parzialmente visibili la cinta<br>muraria costruita tra la fine del VI e la fine del IV<br>secolo a.C., della lunghezza stimata di circa 6<br>chilometri e le 8 torri quadrate</div>")
);
}
}
//]]>
</script>

</head>
<body onload="showMap();" onunload="GUnload()"><div id="wrap">

<div id="header"></div>

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">I luoghi e la natura</a></li>
<li><a href="#">Sciacca Terme</a></li>
<li><a href="#">Come Raggiungerci</a></li>
<li><a href="#">I nostri Trilocali</a></li>
<li><a href="#">Affitto Villetta</a></li>
<li><a href="#">Contatti</a></li>
</ul>

<div class="announce">
<p><span class="bold">Città:</span> Sciacca Terme</p>
<p><span class="bold">Stato:</span> Italia</p>
<p><span class="bold">Regione:</span> Sicilia</p>
<p><span class="bold">Nome abitanti:</span> Saccensi</p>
<p><span class="bold">Santo patrono:</span> Maria SS. del Soccorso</p>
<p><span class="bold">Giorno festivo:</span> 2 Febbraio</p>
<p><span class="bold">Prodotti tipici:</span> Olio, Vino, Prodotti ittici conservieri, Ceramica artistica</p>
</div>

<div class="announce">
<h3>Ultime Notizie:</h3>
<p><strong>Gennaio 15, 2007:</strong><br />
NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS.</p>
<p class="textright"><a href="index.html">Leggi il resto...</a></p>
</div>

</div>

<div id="extras">
<h3>Altre info:</h3>
<p>Potete contattarci telefonicamente al seguente numero: 000111222333</p>

<h3>Links utili:</h3>
<p>- <a href="http://it.wikipedia.org/wiki/Sciacca">Wiki Sciacca</a><br />
- <a href="http://ristoranti.saperviaggiare.it/sciacca-ristoranti.html">Ristoranti</a><br />
- <a href="http://www.yeaah.com/disco/DiscoDetails.asp?IDDisco=357">Discoteche</a><br />
- <a href="http://diving-centers.saperviaggiare.it/sciacca-diving-centers.html">Diving Center</a><br />
</p>

<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>

</div>

<div id="content">
<h2 class="testo">Dove siamo e cosa c'è intorno a noi:</h2>
<p class="testo">Questa sezione del sito oltre a mostrare la precisa localizzazione geografica e ad aiutarti a trovare la strada su come raggiungerci mette in evidenza anche i punti di interesse della zona di Sciacca Terme facilmente raggiungibili per scoprire il territorio e fare gite emozionanti ed indimenticabili</p>

<div id="map">
Your browser doesn't support Google Maps or Javascript is turned off.
</div>


</div>

<div id="footer">
Copyright &copy; 2007 Andrea Nobili WebMaster. Design by <a href="http://www.siatec.net/andrea/fotografia/">Andrea Nobili</a>.
</div>

</div>
</body>
</html>
D4rkAng3l
06-01-2008, 10:27
cosa hai cambiato?
isAlreadyInUse
06-01-2008, 10:28
map.addOverlay(
createMarker(new GLatLng(37.602808,12.969017), "<div id='map' style='width: 300px; height: 180px;font-size:10px;'><b>Eraclea Minoa:</b>Scavi archeologici di grane rilevanza<br>tra cui il teatro costruito alla fine del V secolo a.C, il<br>quartiere delle abitazioni ellenistiche e romane e<br>l'antiquarium che raccoglie reperti dell'abitato e della<br> necropoli, sono inoltre parzialmente visibili la cinta<br>muraria costruita tra la fine del VI e la fine del IV<br>secolo a.C., della lunghezza stimata di circa 6<br>chilometri e le 8 torri quadrate</div>")
);
D4rkAng3l
06-01-2008, 10:36
ti ringrazio ora lo provo...ache se credo che l'id del div non vada bene perchè avevo dato map all'id del div che contiene tutta la mappa...vabbè basta dargli un altro nome tnx :D
isAlreadyInUse
06-01-2008, 10:37
Si cambialo pure l'id, prova e fammi sapere, devi adesso lavorare solo sullo stile per adattarlo alle tue esigenze