Google Maps e CSS

**atsap** · 02-09-2010, 16:42

Salve a tutti!

Ho questo codice:

codice:

<div id="map" style="width:500px; height: 500px;"> 
 
</div>

che è il banalissimo "wrapper" di Google Maps, che ho inserito facendo così:

codice:

 function initialize() {

      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
		map.disableInfoWindow();
        var geocoder = new GClientGeocoder();
        geocoder.getLatLng(address, function(point){
          if(!point){
				address = '<?php echo $cap.", ITALY"; ?>';
          }else{
            var marker = new GMarker(point);
            map.addOverlay(marker); 
            map.setCenter(point, 16);
          }
        });
        map.setUIToDefault();
      }
    }

Il problema è che lo vedo come nell'immagine allegata, ovvero con i box "mappa, satellite, rilievo" con misure anomale. Anche il logo di google è spostato rispetto al solito...
Qualche idea?
Se sapete come disattivare i pulsanti (mappa-satellite-rilievo) tanto di guadagnato...

Grazie!

**fcaldera** · 02-09-2010, 16:47

che doctype usi?

**atsap** · 02-09-2010, 17:35

codice:

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

Mi spieghi che importanza ha?

**fcaldera** · 02-09-2010, 17:45

Originariamente inviato da atsap

codice:

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

Mi spieghi che importanza ha?

prova a sostituirlo con un doctype xhtml strict, solo per assicurarti che il problema non sia dovuto dal fatto che il browser non è in standard mode.

se non risolvi, posta un link alla pagina per poterla vedere

**atsap** · 02-09-2010, 17:57

Provato con

codice:

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

Non ho risolto. Purtroppo non posso postare links perché sto lavorando in locale e non ho ancora configurato il server di destinazione, è una cosa che farò a lavoro ultimato.
Ad ogni modo, credo sia legato al css, infatti, se in esso setto un line-height alto (o basso) le scritte 'mappa, satellite, rilievo' si spostano su o giù. Non vorrei che quei box siano soggetti a qualche div superiore, ma è impossibile anche perché se lo provo in un div qualunque...
Comunque, posto il codice intero della pagina.

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" lang="it" xml:lang="it"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<title>on-line!</title> 
<link href="css/stile.css" rel="stylesheet" type="text/css" /> 
<link href="css/forms.css" rel="stylesheet" type="text/css" /> 
<link href="css/tables.css" rel="stylesheet" type="text/css" /> 
<link href="css/popup.css" rel="stylesheet" type="text/css" /> 
<script src="script/md5.js" type="text/javascript"></script> 
<script type="text/javascript" src="script/ajaxpw.js"></script> 
<script src="script/jquery-1.4.2.js" type="text/javascript"></script> 
<script src="script/popup.js" type="text/javascript"></script> 
<script src="script/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="script/validate.js"></script> 
<script type="text/javascript" src="script/val.js" charset="iso-8859-1"></script> 
<script src="script/rb_menu.js" type="text/javascript" charset="utf-8"></script> 
<script src="script/DD_roundies_0.0.2a-min.js" type="text/javascript"></script> 
<script type="text/javascript" src="script/jquery.validate.pack.js" charset="iso-8859-1"></script> 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzPzV3RYuP4uIz8SPaZ9GWRSoZ9LL1kgbx1aJJtgKb3nWxGamcRSPyt65CFZGud77bzgRbMXskACnHQ" type="text/javascript"></script> 
 
<body onload="initialize();" onunload="GUnload()"> 
<script type="text/javascript"> 
 
  var map = null;
    var geocoder = null;
    var address = '70026, ITALY';
 
 
    function initialize() {
 
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
		map.disableInfoWindow();
        var geocoder = new GClientGeocoder();
        geocoder.getLatLng(address, function(point){
          if(!point){
				address = '70026, ITALY';
          }else{
            var marker = new GMarker(point);
            map.addOverlay(marker); 
            map.setCenter(point, 16);
          }
        });
        map.setUIToDefault();
      }
    }
    </script> 
 
<script type="text/javascript"> 
 
 
 
$(document).ready( function(){
 
DD_roundies.addRule('.bloccoCentrale', '10px', true);
DD_roundies.addRule('#claim','10px 0px 0px 10px', true);
DD_roundies.addRule('#container', '24px', true);
DD_roundies.addRule('.bloccoCentraleInf', '10px', true);
DD_roundies.addRule('.bloccoSup1', '5px', true);
DD_roundies.addRule('.bloccoSup2', '5px', true);
DD_roundies.addRule('.bloccoSup3', '5px', true);
DD_roundies.addRule('.bloccoInf1', '10px', true);
DD_roundies.addRule('.bloccoInf2', '10px', true);
DD_roundies.addRule('.bloccoInf3', '10px', true);
DD_roundies.addRule('.bloccoInf4', '10px', true);
DD_roundies.addRule('.bloccoInf5', '10px', true);
DD_roundies.addRule('.bloccoInf6', '10px', true);
DD_roundies.addRule('.bloccoInf7', '10px', true);
DD_roundies.addRule('legend', '5px', true);
DD_roundies.addRule('fieldset', '5px', true);
DD_roundies.addRule('#menu div','10px 10px 0px 0px', true);
DD_roundies.addRule('input', '5px', true);
DD_roundies.addRule('select', '5px 0px 0px 5px', true);
});
</script> 
 
<style> 
#nome1, #cognome, #email, #msg { margin-left: .5em; float: left; }
#nome1, #cognome, #email, #msg, #subm, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
	br { clear: both; }
	input.error { border: 1px solid red; }
	label.error {
		background: url('img/unchecked.gif') no-repeat;
		margin-left: 20px;
		width: 150px;
	}
</style> 
 
</head> 
 
<body> 
 
<div id="wrapper"> 
	<div id="container" style="width:1100px;"> 
		<div id="barraHeader"> 
			<div id="logo"> 
				[img]img/logo.png[/img]	
				
			</div> 
		</div> 
		<br class="push" /> 
		
		<div id="blank"> 
		</div> 
		<div class="bloccoCentraleInf"> 
			<div id="left"> 
	<div class="bloccoInf4" style="background:white; padding: 10px 0 10px 0; text-align:center;"> 
			[img]upl_images/moai.jpg[/img]			</div> 
			<div class="bloccoInf4" style="background:white;"> 
			
			<p style="line-height:1px;margin: 20px;">Chi siamo[img]img/54.png[/img]</p> 
			<p style="line-height:1px;margin: 20px;">Cosa facciamo[img]img/62.png[/img]</p> 
			<p style="line-height:1px;margin: 20px;">Contattaci[img]img/2.png[/img]</p> 
			</div> 
			</div> 
			<div id="middle"> 
			<div class="bloccoInf2" style="width:820px;"> 
			<h2>Contattaci!</h2> 
			</div> 
			
					<div class="bloccoInf2" style="color: black; width:820px; "> 
 
					  
					    <div style="width: 810px; height:100%; text-align:center; margin:auto; padding: 20px 0px 20px 0px;"> 
 
 
<form action="sndMail.php" id="frmSnd" method="post"> 
<label for="nome1" class="lab">Nome</label> 
<input type="text" id="nome1" name="nome1"> 

 
<label for="cognome" class="lab">Cognome</label> 
<input type="text" id="cognome" name="cognome">

 
<label for="email" class="lab">E-mail</label> 
<input type="text" id="email" name="email">

 
<label for="msg" class="lab">Messaggio</label> 
<textarea rows="5" cols="40" id="msg" name="msg"></textarea>

 
<label for="invia" class="lab">Invia</label> 
<input type="submit" id="subm"> 
<input type="text" name="bot" id="bot" class="bot" value="" style="visibility:hidden; background-color:#FFFFFF; border: 0;" /> 
</form> 
 
 
 
</div> 
<div style="width: 500px; height:100%; text-align:center; margin-left: 20%; "> 
La nostra sede è qui. Venite pure a trovarci :-D Si, proprio quando vi pare, amici miei!La nostra sede è qui. Venite pure a trovarci :-D Si, proprio quando vi pare, amici miei!
<div id="map" style="width:500px; height: 500px;"> 
 
</div> 
</div> 
					   
					    
			  </div> 
			</div> 
 
			
					<br class="push" /> 
					
		</div> 
 
</div> 
 
</div> 
 
</body> 
</html>

Spero possa servire a risolvere il problema... se serve il css...
Ah, un'altra curiosità... per caso sapete come si fa ad indentare automaticamente il codice con Dreamweaver 8?
Grazie!

**atsap** · 02-09-2010, 18:17

Risolto! Era un problema di div superiore. Colpa mia

Discussione: Google Maps e CSS

Strumenti discussione

Ricerca discussione

Visualizza

Google Maps e CSS

Permessi di invio