Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/07/2012, 11:02
phyronx
 
Fecha de Ingreso: mayo-2009
Mensajes: 232
Antigüedad: 15 años, 6 meses
Puntos: 3
Api 3 google maps

Buenas, necesito incluir 2 mapas independientes en una misma pagina, y llevo todo el dia sin conseguirlo.
Les dejo el codigo:


Código Javascript:
Ver original
  1. <script>
  2.       var map;
  3.       var map2;
  4.       function initialize() {
  5.         var mapOptions = {
  6.           zoom: 5,
  7.           center: new google.maps.LatLng(40.350288, -3.681253),
  8.           mapTypeId: google.maps.MapTypeId.ROADMAP
  9.         };
  10.         map = new google.maps.Map(document.getElementById('map_canvas'),
  11.             mapOptions);
  12.  
  13.          var mapOptions2 = {
  14.           zoom: 8,
  15.           center: new google.maps.LatLng(-34.397, 150.644),
  16.           mapTypeId: google.maps.MapTypeId.ROADMAP
  17.         };
  18.         map2 = new google.maps.Map(document.getElementById('map_canvas2'),
  19.             mapOptions2);

ESto es parte del script que uso, ya que el primer mapa es completo, y el segundo de momento es lo mas basico. Como podeis ver solo cambio el nombre de las variables sumandole un "2".

Despues cargo los mapas cada uno dentro de un div, con su id, que esta dentro de 2 tablas exactamente iguales.

Pues el primero me lo carga muy bien, pero el segundo carga bien todo menos la imagen del mapa que solo se muestra hasta la mitad izquierda del <td>, aunque lo de teminos i condiciones y lo de seleccionar el tipo de mapa esta a la derecha bien puesto, solo es la imagen del mapa en si.

Esta es la tabla que uso:

Código HTML:
Ver original
  1. <table border="1" height="90%" width="100%">
  2.   <tr>
  3.   <td width="40%" height="90%" valign="top">          
  4. <p><strong>Nombre de la zona</strong></p>
  5.            <p> <input name="nombrez" id="nombrez" type="text" />  </p>  
  6.            
  7.           </td>
  8.           <td width="60%">
  9.          <div id="map_canvas2"></div>
  10.           </td>
  11.            </tr>

Las 2 son iguales.

Y los css por si sirven:

Código HTML:
Ver original
  1. #map_canvas {
  2.         margin: 0;
  3.         padding: 0;
  4.         height: 100%;
  5.       }
  6.       #map_canvas2 {
  7.         margin: 0;
  8.         padding: 0;
  9.         height: 100%;
  10.       }


Otros datos raros:

en el primero me deja cambiar entre mapa y satelite, uno al lado del otro, y sale activo el munequito del street view,
en el segundo sale mapa y satelite pero en una lista desplegable, y el streetview desactivado.