Google maps si vede mezza mappa; se clicco su Aggiorna si vede bene

**gim** · 04-01-2010, 16:38

Ciao a tutti.

Ho una mappa di google sul sito che visualizza un punto in base ad un indirizzo.
La mappa sta dentro un altro Div (quindi due div annidati).

Funzionerebbe tutto se non fosse che incredibilmente, quando visualizzo la mappa ne vedo solo il 50% ed il resto del quadrato è grigio.
Quindi i tasti "ibrida", "satellite" ecc. stanno sulla porzione grigia.
Allego un'immagine per rendere l'idea.

La cosa ancor più assurda è che se clicco su F5 per aggiornare la pagina del browser, la mappa occupa tutto lo spazio che gli ho impostato correttamente.

Cosa sbaglio?
Come potrei risolvere?

Grazie

Ps
il problema si presenta con tutti i browser.

**gim** · 04-01-2010, 17:55

Scusami moderatore, ma credo che il problema sia proprio nei CSS.
Non so. Comuqnue se qualcuno sa darmi qualche dritta...
Grazie

**marco.carrieri** · 04-01-2010, 21:32

Hai una pagina online dove si puo vedere il codice?

**gim** · 04-01-2010, 22:43

Ciao MArco, ti ringrazio.

Preferisco non postare il sito poichè è di un cliente. Tuttavia ti posto un po' di codice. Magari noti qualche errore.

codice:

 <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=quilakey" type="text/javascript"></script>
<script type="text/javascript">
var tcontent4 = null;
var geocoder = null;

function load() {
  if (GBrowserIsCompatible()) {
	tcontent4 = new GMap2(document.getElementById("tcontent4"));
	tcontent4.addControl(new GSmallMapControl());
	tcontent4.addControl(new GMapTypeControl());
	tcontent4.setCenter(new GLatLng(41.91633, 12.482185), 7);
	geocoder = new GClientGeocoder();
  }
}

function showAddress(address) {
  if (geocoder) {
	geocoder.getLatLng(
	  address,
	  function(point) {
		if (!point) {
		  alert(address + " not found");
		} else {
		  tcontent4.setCenter(point, 11);
		  var marker = new GMarker(point);
		  tcontent4.addOverlay(marker);
		  marker.openInfoWindowHtml(address);
		}
	  }
	);
  }
}
</script>
</HEAD>
<BODY onload="load(); showAddress('indirizzo gdsfg gdf, Italy');"  leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" link="#333333" vlink="#666666" alink="#999999" bgColor=#FFFFFF>

<div id="flowertabs" class="modernbricksmenu2"> 

                      <ul>[*]1 [*]2 [*]3[*]4[*]5[/list]
                    </div>

                    

                    

<div style="border:1px solid gray; width: 600px; height: 600px;  background-color: #D9E0F0;"> 
<div id="tcontent1" class="tabcontent"></div>
<div id="tcontent2" class="tabcontent"> </div>
<div id="tcontent4" style="width: 600px; height: 600px;"> </div>
 <div id="tcontent3"> 
                      
</div>
<div id="tcontent5" class="tabcontent">  </div>
</div>

O magari puoi darmi qualche dritta per fare meglio questa pagina.

In sintesi, si tratta di una mappa dentro una voce di un menu a tab.

La mappa di google è dentro "tcontent4".
Il risultato visivo è quello dell'immagine allegata sopra. In pratica è come se la mappa si vedesse al 50% delle sue dimensioni.
Se faccio un aggiorna torna a posto.
Grazie

**marco.carrieri** · 05-01-2010, 09:25

Io lo vedo cosi. E mi sembra corretto.

**gim** · 05-01-2010, 10:20

Purtroppo io non la vedo così. La vedo come indicato nell'immagine allegata.
Forse quindi il problema non è dei DIV.
Da cosa potrà dipendere?

La pagina non ha nulla di particolare oltre questi.

**gim** · 05-01-2010, 10:31

Aggiungo una cosa. Effettivamente anch'io la vedo come la vedi tu, ma solo dopo aver premuto F5.

**marco.carrieri** · 05-01-2010, 10:56

Hai provato ad impostare tutti i margin via css?

**marco.carrieri** · 05-01-2010, 10:59

In questo modo da sempre lo stesso errore?

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

        <title>Prova</title>

        <script src="http://maps.google.com/maps?file=api&v=2.x&key=quilakey" type="text/javascript"></script>

        <script type="text/javascript">

            var tcontent4 = null;

            var geocoder = null;

            function load()

            {

                if(GBrowserIsCompatible())

                {

                    tcontent4 = new GMap2(document.getElementById("tcontent4"));

                    tcontent4.addControl(new GSmallMapControl());

                    tcontent4.addControl(new GMapTypeControl());

                    tcontent4.setCenter(new GLatLng(41.91633, 12.482185), 7);

                    geocoder = new GClientGeocoder();

                }

            }

            function showAddress(address)

            {

                if(geocoder)

                {

                    geocoder.getLatLng

                    (

                        address,function(point)

                        {

                            if(!point)

                            {

                                alert(address + " not found");

                            }

                            else

                            {

                                tcontent4.setCenter(point, 11);

                                var marker = new GMarker(point);

                                tcontent4.addOverlay(marker);

                                marker.openInfoWindowHtml(address);

                            }

                        }

                    );

                }

            }

        </script>

        <style type="text/css">

            body

            {

                margin:0px;

                background:#cccccc;

            }

            a

            {

                color:#666666;

            }

        </style>

    </head>

    <body onload="load();showAddress('Rovigo, Italy');">

        <div id="flowertabs" class="modernbricksmenu2"> 

            <ul>

                [*][url="#"]1 [/url]

                [*][url="#"]2[/url] 

                [*][url="#"]3[/url]

                [*][url="#"]4[/url]

                [*][url="#"]5[/url]

            [/list]

        </div>

        



        <div style="border:1px solid gray; width: 600px; height: 600px;  background-color: #D9E0F0;"> 

            <div id="tcontent1" class="tabcontent"></div>

            <div id="tcontent2" class="tabcontent"></div>

            <div id="tcontent4" style="width: 600px; height: 600px;"> </div>

            <div id="tcontent3"></div>

            <div id="tcontent5" class="tabcontent"></div>

        </div>

    </body>

</html>

**gim** · 05-01-2010, 11:12

Se la carico così come me lo hai mandato la vedo correttamente.
Ma appena aggiungo il codice per attivare il menu a tab lo vedo male anche questo.
Ti allego lì'immagine.

Che cosa ho aggiunto. Allora:

codice:

 
Nell'head questo:

<link rel="stylesheet" type="text/css" href="/foto/tabcontent.css" />
<script type="text/javascript" src="/foto/tabcontent.js">
</script>

Che sono dei css per un menu a tab preso da www.dynamicdrive.com.

A fondo pagina

<script type="text/javascript" language="">
var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

Quindi credo che il problema risieda proprio in questo codice del tab menu. Se vuoi posso postarti anche il contenuto dei file css.

Discussione: Google maps si vede mezza mappa; se clicco su Aggiorna si vede bene

Strumenti discussione

Ricerca discussione

Visualizza

Google maps si vede mezza mappa; se clicco su Aggiorna si vede bene

Permessi di invio