Efecto jquery con google maps

xellost · #1 (**permalink**) 23/11/2011, 12:09

Hola a todos,

Estoy haciendo pruebas con la api v3 de google map y me ha surgido un problema.
Quiero mostrar un mapa de una determinada zona permitiendo que el usuario arrastre una marca, eso lo tengo conseguido pero por defecto quiero que aparezca la capa oculta. He estado mirando los efectos de jquery y quiero mostrarla de forma que se vaya mostrando lentamente generando un efecto. Bien pues todo eso esta bien pero cuando muestra el mapa, lo muestra de manera incorrecta, la mitad del mapa no me carga y carga una imagen gris.

La página de ejemplo es esta:

Código HTML:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Informacion imagen</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
function cambia(){
    $("#mapCanvas").show(2000);
  }
 
 
var geocoder = new google.maps.Geocoder();
var map;
 
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
 
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
 
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat().toFixed(3),
latLng.lng().toFixed(3)
].join(', ');
}
 
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
 
function initialize() {
$("#mapCanvas").hide();
var myLatlng = new google.maps.LatLng(41.396, 2.144);
var myOptions = {
zoom: 11,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
 
var marker = new google.maps.Marker({
position: myLatlng,
draggable:true, 
map: map
});
 
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
//updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
//updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
//updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
 
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
draggable:true, 
map: map
});
// Update current position info.
updateMarkerPosition(location);
geocodePosition(location);
 
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
//updateMarkerAddress('Dragging...');
});
 
google.maps.event.addListener(marker, 'drag', function() {
//updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
 
google.maps.event.addListener(marker, 'dragend', function() {
//updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
 
 
 
 
// Onload handler to fire off the app.
</script>
<style type="text/css">
body {
    margin-left: 2px;
    margin-top: 2px;
    margin-right: 2px;
    margin-bottom: 2px;
}
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
.titulo {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #FFF;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
</head>
 
<body onload="initialize()">
<table width="880" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr>
    <td height="23" colspan="2" align="center" bgcolor="#757575" class="titulo">INFORMACIÓN DE LA IMAGEN</td>
  </tr>
  <tr>
    <td width="356" height="420"><div id="infoPanel">
<b>Marca:</b>
 
<div id="markerStatus"><i>Arrastra la marca.</i></div>
<b>Posición actual:</b>
<div id="info"></div>
<b>Dirección:</b>
<div id="address"></div>
</div></td>
    <td width="500" height="420" align="center" valign="top"><div id="mapCanvas"></div></td>
  </tr>
  <tr>
    <td height="150" align="center" valign="middle"><img src="http://maps.google.com/maps/api/staticmap?center=41.399,2.163&zoom=12&size=250x150&markers=color:red|color:red|label:P|41.399,2.163&sensor=false" onclick="cambia()"></td>
    <td width="500" height="180" valign="top">&nbsp;</td>
  </tr>
</table>
</body>
</html>

el ejemplo es clicando la imagen del mapa que aparece abajo.

He utilizado $("#mapCanvas").hide(); para ocultarlo cuando se carga la pagina, y al clicar uso lo siguiente $("#mapCanvas").show(2000);

Espero haberme explicado bien, muchas gracias de antemano.