Tema: google map v3, 3 maps on same page
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 04/12/2012, 03:47
helenp
 
Fecha de Ingreso: mayo-2009
Mensajes: 382
Antigüedad: 15 años
Puntos: 6
Respuesta: google map v3, 3 maps on same page
Gracias, ya he hecho algo parecido, y creia que lo tenia ya que 2 mapas iba a perfeccion en firefox, añado un tercero y solo salen dos, no veo el fallo, será alguna tontería.
Ahora lo pruebo en chrome y sale solo 2 mapas pero encima sin marcadores.
Tiene que ser 3 mapas con marcadores y con un infowindows distinto para cada uno. Tambien he probado con tener el script en <head>
Esto es lo que tengo hasta ahora y me siento como para tirar la toalla:
En head:
Código Javascript: 
Ver original
  1. <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
  2.  <script type="text/javascript">
  3.  function start() {
  4.   initialize();
  5. }
  6. window.onload = start;
  7.  </script>
  8. <script type="text/javascript"> 
  9. //<![CDATA[
  10. var map = null;
  11. var map2 = null;
  12. var map3 = null;
  13. function initialize() {
  14.   var myOptions = {
  15.     zoom: 13,
  16.     center: new google.maps.LatLng(36.51308543049258, -4.886341094970703),
  17.     mapTypeControl: true,
  18.     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  19.     navigationControl: true,
  20.     mapTypeId: google.maps.MapTypeId.ROADMAP
  21.   }
  22.   map = new google.maps.Map(document.getElementById("map_canvas"),
  23.                                 myOptions);
  24.  
  25.   google.maps.event.addListener(map, 'click', function() {
  26.         infowindow.close();
  27.         });
  28.  
  29.  var myOptions2 = {
  30.     zoom: 13,
  31.     center: new google.maps.LatLng(36.488661268293136, -4.986934661865234),
  32.     mapTypeControl: true,
  33.     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  34.     navigationControl: true,
  35.     mapTypeId: google.maps.MapTypeId.ROADMAP
  36.   }
  37.   map2 = new google.maps.Map(document.getElementById("map_canvas2"),
  38.                                 myOptions2);
  39.  
  40.   google.maps.event.addListener(map2, 'click', function() {
  41.         infowindow.close();
  42.         });
  43.         
  44.         var myOptions3 = {
  45.     zoom: 13,
  46.     center: new google.maps.LatLng(36.51032602426021, -4.794673919677734),
  47.     mapTypeControl: true,
  48.     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  49.     navigationControl: true,
  50.     mapTypeId: google.maps.MapTypeId.ROADMAP
  51.   }
  52.   map3 = new google.maps.Map(document.getElementById("map_canvas3"),
  53.                                 myOptions3);
  54.  
  55.   google.maps.event.addListener(map3, 'click', function() {
  56.         infowindow.close();
  57.         });
  58.         
  59.   // Add markers to the map
  60.   // Markers map (Marbella town)
  61.     
  62.        var point = new google.maps.LatLng(36.509653404078676, -4.91289496421814);
  63.       var marker = createMarker(point,'<div style="width:240px">text here <a href="link here">Link<\/a><\/div>')
  64.      
  65.        // Add markers to the map
  66.   // Markers map2 (Puerto Banus)
  67.           
  68.         var point =  new google.maps.LatLng(36.502530170146976, -4.951658248901367);
  69.       var marker2 = createMarker(point,'<div style="width:240px">text here<a href="link here">Link<\/a><\/div>')
  70.  
  71.   
  72.            // Add markers to the map
  73.   // Markers map3 (Marbella east)
  74.   
  75.   var point = new google.maps.LatLng(36.50598,-4.809995);
  76.       var marker3 = createMarker(point,'<div style="width:240px">text here<a href="link here">Link<\/a><\/div>')
  77.       
  78. }
  79.  
  80. var infowindow = new google.maps.InfoWindow(
  81.   { 
  82.     size: new google.maps.Size(150,50)
  83.   });
  84.     
  85. function createMarker(latlng, html) {
  86.     var contentString = html;
  87.     var marker = new google.maps.Marker({
  88.         position: latlng,
  89.         map: map,
  90.         zIndex: Math.round(latlng.lat()*-100000)<<5
  91.         });
  92.          var marker2 = new google.maps.Marker({
  93.         position: latlng,
  94.         map: map2,
  95.         zIndex: Math.round(latlng.lat()*-100000)<<5
  96.         });
  97.         var marker3 = new google.maps.Marker({
  98.         position: latlng,
  99.         map: map3,
  100.         zIndex: Math.round(latlng.lat()*-100000)<<5
  101.         });
  102.  
  103.     google.maps.event.addListener(marker, 'click', function() {
  104.         infowindow.setContent(contentString); 
  105.         infowindow.open(map,marker);
  106.         });
  107.         
  108.         google.maps.event.addListener(marker2, 'click', function() {
  109.         infowindow.setContent(contentString); 
  110.         infowindow.open(map2,marker2);
  111.         });
  112.         
  113.         google.maps.event.addListener(marker3, 'click', function() {
  114.         infowindow.setContent(contentString); 
  115.         infowindow.open(map3,marker3);
  116.         });
  117. }
  118. </script> 
  119. </head>
En <body>
Código HTML: 
Ver original
  1. <div id="map_canvas" style="width: 580px; height: 400px"></div> 
  2.  <div id="map_canvas2" style="width: 580px; height: 400px"></div>
  3.  <div id="map_canvas3" style="width: 580px; height: 400px"></div>
Gracias