Api 3 google maps

phyronx · #1 (**permalink**) 30/07/2012, 11:02

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<script>
      var map;
      var map2;
      function initialize() {
        var mapOptions = {
          zoom: 5,
          center: new google.maps.LatLng(40.350288, -3.681253),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
 
         var mapOptions2 = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map2 = new google.maps.Map(document.getElementById('map_canvas2'),
            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<table border="1" height="90%" width="100%">
  <tr>
  <td width="40%" height="90%" valign="top">          
<p><strong>Nombre de la zona</strong></p>
           <p> <input name="nombrez" id="nombrez" type="text" />  </p>  
           
          </td>
          <td width="60%">
         <div id="map_canvas2"></div>
          </td>
           </tr>
</table>

Las 2 son iguales.

Y los css por si sirven:

Código HTML:

Ver original#map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map_canvas2 {
        margin: 0;
        padding: 0;
        height: 100%;
      }

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.

#2 (**permalink**) 31/07/2012, 12:54

Trataré de ayudarte, pero veo los códigos tructados:

Por una parte el javascript no está cerrado. Faltaría la última llave y la invocación a initialize() (dentro del javascript o, como muchos lo hacen, dentro de la etiqueta body.

Podría quedar (directamente en el javascript), así :

Código Javascript:

Ver originalvar map;
      var map2;
      function initialize() {
        var mapOptions = {
          zoom: 5,
          center: new google.maps.LatLng(40.350288, -3.681253),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
 
         var mapOptions2 = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map2 = new google.maps.Map(document.getElementById('map_canvas2'),
            mapOptions2);
      }  //
      google.maps.event.addDomListener(window, 'load', initialize);

Te recuerdo que hay otras formas de invocar la función que son perfectamente correctísimas.
Muchos prefieren (eliminada la última línea que he añadido al javascript)

Código HTML:

Ver original<body onload="initialize();">

Por otra parte, en tu código no veo donde está el primer mapa

Código HTML:

Ver original<div id="map_canvas"></div>

Lo he tratado de reproducir y, evidentemente, el alto dado en CSS a los mapas se encuentra limitado por la celda de la tabla. Esto es, dale un alto a la celda para que el 100% del mapa sea toda su altura.

Si me pasas el código completo, lo releo y lo vemos.