Tema: Efecto jquery con google maps
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/11/2011, 12:09
xellost
 
Fecha de Ingreso: mayo-2010
Mensajes: 3
Antigüedad: 14 años
Puntos: 0
Efecto jquery con google maps
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Informacion imagen</title>
  6. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  7. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
  8. <script type="text/javascript">
  9. function cambia(){
  10.     $("#mapCanvas").show(2000);
  11.   }
  12.  
  13.  
  14. var geocoder = new google.maps.Geocoder();
  15. var map;
  16.  
  17. function geocodePosition(pos) {
  18. geocoder.geocode({
  19. latLng: pos
  20. }, function(responses) {
  21. if (responses && responses.length > 0) {
  22. updateMarkerAddress(responses[0].formatted_address);
  23. } else {
  24. updateMarkerAddress('Cannot determine address at this location.');
  25. }
  26. });
  27. }
  28.  
  29. function updateMarkerStatus(str) {
  30. document.getElementById('markerStatus').innerHTML = str;
  31. }
  32.  
  33. function updateMarkerPosition(latLng) {
  34. document.getElementById('info').innerHTML = [
  35. latLng.lat().toFixed(3),
  36. latLng.lng().toFixed(3)
  37. ].join(', ');
  38. }
  39.  
  40. function updateMarkerAddress(str) {
  41. document.getElementById('address').innerHTML = str;
  42. }
  43.  
  44. function initialize() {
  45. $("#mapCanvas").hide();
  46. var myLatlng = new google.maps.LatLng(41.396, 2.144);
  47. var myOptions = {
  48. zoom: 11,
  49. center: myLatlng,
  50. mapTypeId: google.maps.MapTypeId.ROADMAP
  51. }
  52. map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
  53.  
  54. var marker = new google.maps.Marker({
  55. position: myLatlng,
  56. draggable:true, 
  57. map: map
  58. });
  59.  
  60. // Add dragging event listeners.
  61. google.maps.event.addListener(marker, 'dragstart', function() {
  62. //updateMarkerAddress('Dragging...');
  63. });
  64. google.maps.event.addListener(marker, 'drag', function() {
  65. //updateMarkerStatus('Dragging...');
  66. updateMarkerPosition(marker.getPosition());
  67. });
  68. google.maps.event.addListener(marker, 'dragend', function() {
  69. //updateMarkerStatus('Drag ended');
  70. geocodePosition(marker.getPosition());
  71. });
  72. }
  73.  
  74. function placeMarker(location) {
  75. var marker = new google.maps.Marker({
  76. position: location,
  77. draggable:true, 
  78. map: map
  79. });
  80. // Update current position info.
  81. updateMarkerPosition(location);
  82. geocodePosition(location);
  83.  
  84. // Add dragging event listeners.
  85. google.maps.event.addListener(marker, 'dragstart', function() {
  86. //updateMarkerAddress('Dragging...');
  87. });
  88.  
  89. google.maps.event.addListener(marker, 'drag', function() {
  90. //updateMarkerStatus('Dragging...');
  91. updateMarkerPosition(marker.getPosition());
  92. });
  93.  
  94. google.maps.event.addListener(marker, 'dragend', function() {
  95. //updateMarkerStatus('Drag ended');
  96. geocodePosition(marker.getPosition());
  97. });
  98. }
  99.  
  100.  
  101.  
  102.  
  103. // Onload handler to fire off the app.
  104. </script>
  105. <style type="text/css">
  106. body {
  107.     margin-left: 2px;
  108.     margin-top: 2px;
  109.     margin-right: 2px;
  110.     margin-bottom: 2px;
  111. }
  112. #mapCanvas {
  113. width: 500px;
  114. height: 400px;
  115. float: left;
  116. }
  117. .titulo {
  118.     font-family: Verdana, Geneva, sans-serif;
  119.     font-size: 14px;
  120.     font-style: normal;
  121.     font-weight: bold;
  122.     font-variant: normal;
  123.     color: #FFF;
  124. }
  125. #infoPanel {
  126. float: left;
  127. margin-left: 10px;
  128. }
  129. #infoPanel div {
  130. margin-bottom: 5px;
  131. }
  132. </style>
  133. </head>
  134.  
  135. <body onload="initialize()">
  136. <table width="880" border="0" align="center" cellpadding="2" cellspacing="2">
  137.   <tr>
  138.     <td height="23" colspan="2" align="center" bgcolor="#757575" class="titulo">INFORMACIÓN DE LA IMAGEN</td>
  139.   </tr>
  140.   <tr>
  141.     <td width="356" height="420"><div id="infoPanel">
  142. <b>Marca:</b>
  143.  
  144. <div id="markerStatus"><i>Arrastra la marca.</i></div>
  145. <b>Posición actual:</b>
  146. <div id="info"></div>
  147. <b>Dirección:</b>
  148. <div id="address"></div>
  149. </div></td>
  150.     <td width="500" height="420" align="center" valign="top"><div id="mapCanvas"></div></td>
  151.   </tr>
  152.   <tr>
  153.     <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>
  154.     <td width="500" height="180" valign="top">&nbsp;</td>
  155.   </tr>
  156. </table>
  157. </body>
  158. </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.