[JavaScript] Problema ad aggiungere punti di interesse a GoogleMap

D4rkAng3l · 06-01-2008, 10: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/archivi...dovesiamo.html

ed il codice è:

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, 11:22

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">
	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, 11:27

cosa hai cambiato?

isAlreadyInUse · 06-01-2008, 11:28

Codice:

 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, 11: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

isAlreadyInUse · 06-01-2008, 11:37

Si cambialo pure l'id, prova e fammi sapere, devi adesso lavorare solo sullo stile per adattarlo alle tue esigenze

06-01-2008, 11:37	#6
isAlreadyInUse Senior Member Iscritto dal: Sep 2007 Messaggi: 754	Si cambialo pure l'id, prova e fammi sapere, devi adesso lavorare solo sullo stile per adattarlo alle tue esigenze __________________ http://www.tevigroup.it/

06-01-2008, 11:27	#3
D4rkAng3l Bannato Iscritto dal: Mar 2004 Città: Roma Messaggi: 2683	cosa hai cambiato?

06-01-2008, 11:36	#5
D4rkAng3l Bannato Iscritto dal: Mar 2004 Città: Roma Messaggi: 2683	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

Strumenti
Mostra una versione stampabile Invia questa pagina per email