Foros del Web » Programando para Internet » Javascript »

google map v3, 3 maps on same page

 Estas en el tema de google map v3, 3 maps on same page en el foro de Javascript en Foros del Web. Hola, Tengo google maps v2 con 3 mapas en la misma página, como necesito https: pues tengo que cambiar a v3, pero no consigo hacer ...
  #1 (permalink)  
Antiguo 02/12/2012, 16:19
 
Fecha de Ingreso: mayo-2009
Mensajes: 382
Antigüedad: 14 años, 10 meses
Puntos: 6
google map v3, 3 maps on same page
Hola,
Tengo google maps v2 con 3 mapas en la misma página,
como necesito https: pues tengo que cambiar a v3, pero no consigo
hacer mas de un mapa en la misma página.
Esto es un mapa y necesito tener dos mas, pero con distintas coordinadas claro.

Código Javascript: 
Ver original
  1. <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
  2.  
  3. <div id="map_canvas" style="width: 580px; height: 400px"></div>
  4.  
  5. <script type="text/javascript"> 
  6. //<![CDATA[
  7. var map = null;
  8. function initialize() {
  9.   var myOptions = {
  10.     zoom: 13,
  11.     center: new google.maps.LatLng(36.51308543049258, -4.886341094970703),
  12.     mapTypeControl: true,
  13.     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  14.     navigationControl: true,
  15.     mapTypeId: google.maps.MapTypeId.ROADMAP
  16.   }
  17.   map = new google.maps.Map(document.getElementById("map_canvas"),
  18.                                 myOptions);
  19.  
  20.   google.maps.event.addListener(map, 'click', function() {
  21.         infowindow.close();
  22.         });
  23.  
  24.   // Add markers to the map
  25.   // Set up three markers with info windows 
  26.   
  27.        
  28.       var point = new google.maps.LatLng(36.50856685143835, -4.866085052490234);
  29.       var marker = createMarker(point,'<div style="width:240px">Text here <a href="link here">Link<\/a><\/div>')
  30.       
  31.       
  32.        var point = new google.maps.LatLng(36.509653404078676, -4.91289496421814);
  33.       var marker = createMarker(point,'<div style="width:240px"Text here <a href="link here">Link<\/a><\/div>')
  34.       
  35.       
  36.         var point = new google.maps.LatLng(36.508601,-4.875945);
  37.       var marker = createMarker(point,'<div style="width:240px">Text here<a href="link here">Link<\/a><\/div>')       
  38.      
  39. }
  40.  
  41. var infowindow = new google.maps.InfoWindow(
  42.   { 
  43.     size: new google.maps.Size(150,50)
  44.   });
  45.     
  46. function createMarker(latlng, html) {
  47.     var contentString = html;
  48.     var marker = new google.maps.Marker({
  49.         position: latlng,
  50.         map: map,
  51.         zIndex: Math.round(latlng.lat()*-100000)<<5
  52.         });
  53.  
  54.     google.maps.event.addListener(marker, 'click', function() {
  55.         infowindow.setContent(contentString); 
  56.         infowindow.open(map,marker);
  57.         });
  58. }
  59.  
  60. </script>

Alguna idea?
Última edición por helenp; 03/12/2012 a las 02:32
  #2 (permalink)  
Antiguo 03/12/2012, 14:50
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: google map v3, 3 maps on same page
En la parte HTML crea (con los estilos y espacios que quieras) las etiquetas de los tres mapas que no tienen por qué ser <div id="map_canvas"></div>

Llamémosles
Código HTML: 
Ver original
  1. <div id="mapa1"></div>
  2. <div id="mapa2"></div>
  3. <div id="mapa3"></div>

Y luego, a repetir los javascript con los elementos que van cambiando:
Código Javascript: 
Ver original
  1. function initialize() {
  2.   var opcionesmapa1 = {
  3.     zoom: 13,
  4.     center: new google.maps.LatLng(36.51308543049258, -4.886341094970703),
  5.     mapTypeControl: true,
  6.     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  7.     navigationControl: true,
  8.     mapTypeId: google.maps.MapTypeId.ROADMAP
  9.   }
  10.   map = new google.maps.Map(document.getElementById("mapa1"),
  11.                                 opcionesmapa1);
  12. ...

Mas que nunca en este caso, sería recomendable crear aparte los archivos javascript, uno por cada mapa y llamarlos en el <head>
Saludos.
  #3 (permalink)  
Antiguo 04/12/2012, 03:47
 
Fecha de Ingreso: mayo-2009
Mensajes: 382
Antigüedad: 14 años, 10 meses
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
  #4 (permalink)  
Antiguo 04/12/2012, 05:57
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: google map v3, 3 maps on same page
He probado con Firefox, Chrome e IE y veo los tres mapas. (Claro que habría que ver las versiones)

Con los infowindow, veo en todos el mismo mensaje.

Dado que con tres resulta difícil controlar el que no se mezclen marcadores y ventanas, te sugería que hagas tres javascript y los enlazas en el <head>

Por ejemplo: mapa1.js mapa2.js y mapa3.js de forma que, salvo por la diferencia en el nombre del div del mapa, la construcción sería prácticamente igual excepto las variaciones.

Porque estoy tratando de reproducirlo y ... la verdad es para confundirse.

Me cuentas.
  #5 (permalink)  
Antiguo 04/12/2012, 07:25
 
Fecha de Ingreso: mayo-2009
Mensajes: 382
Antigüedad: 14 años, 10 meses
Puntos: 6
Respuesta: google map v3, 3 maps on same page
Cita:
Iniciado por txemaarbulo Ver Mensaje
He probado con Firefox, Chrome e IE y veo los tres mapas. (Claro que habría que ver las versiones)

Con los infowindow, veo en todos el mismo mensaje.

Dado que con tres resulta difícil controlar el que no se mezclen marcadores y ventanas, te sugería que hagas tres javascript y los enlazas en el <head>

Por ejemplo: mapa1.js mapa2.js y mapa3.js de forma que, salvo por la diferencia en el nombre del div del mapa, la construcción sería prácticamente igual excepto las variaciones.

Porque estoy tratando de reproducirlo y ... la verdad es para confundirse.

Me cuentas.
Gracias, de verdad que no ando muy pez en javascript.
Te refieres a hacer tres funciones diferentes?
Entonces tendría que meter las 3 aqui no?
function start() {
initialize();
}
window.onload = start;
</script>
  #6 (permalink)  
Antiguo 04/12/2012, 07:33
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: google map v3, 3 maps on same page
Si, todas comenzarían igual (así no caemos en el error de si algo se repitio o se sobreescribe).
Al tener IDs diferentes, cada cual irá al suyo (a su mapa).

La función te la hace igual pero yo suelo reducir tu código
Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2.  function start() {
  3.   initialize();
  4. }
  5. window.onload = start;
  6.  </script>
  7. <script type="text/javascript">
  8. function initialize() {
  9. ...
  10. }
simplemente por
Código Javascript: 
Ver original
  1. window.onload=function(){
  2. ...
  3. }

(Cada cual tiene derecho a tener sus manías)
  #7 (permalink)  
Antiguo 04/12/2012, 11:58
 
Fecha de Ingreso: mayo-2009
Mensajes: 382
Antigüedad: 14 años, 10 meses
Puntos: 6
Respuesta: google map v3, 3 maps on same page
Puf, no veo nada, asi separado me salen dos mapas,
con el mismo nombre de la funcion createmarker me sale solo marcadores en mapa 1,
si cambio el nombre de la funcion createmarker al nombre createmarker2 me sale solo marcadores en mapa 2....

A ver si alguien ve algo mas que se debe de cambiar:

Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2.     window.onload=function(){
  3.         initialize();
  4.         initialize2();
  5.     }
  6.  </script>
  7. <script type="text/javascript"> 
  8. //<![CDATA[
  9. var map = null;
  10. function initialize() {
  11.   var myOptions = {
  12.     zoom: 13,
  13.     center: new google.maps.LatLng(36.51308543049258, -4.886341094970703),
  14.     mapTypeControl: true,
  15.     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  16.     navigationControl: true,
  17.     mapTypeId: google.maps.MapTypeId.ROADMAP
  18.   }
  19.   map = new google.maps.Map(document.getElementById("map_canvas"),
  20.                                 myOptions);
  21.  
  22.   google.maps.event.addListener(map, 'click', function() {
  23.         infowindow.close();
  24.         });
  25.  
  26.   // Add markers to the map
  27.   // Set up three markers with info windows 
  28.   
  29.        
  30.       var point = new google.maps.LatLng(36.50856685143835, -4.866085052490234);
  31.       var marker = createMarker(point,'<div style="width:240px">Banana Beach, several 2 and 3 bedrooms, beach front apartments in a beautiful complex, sleeps 4-6 persons <a href="banana_beach_beachfront_apartment_marbella.htm">Link<\/a><\/div>')
  32.           
  33. }
  34.  
  35. var infowindow = new google.maps.InfoWindow(
  36.   { 
  37.     size: new google.maps.Size(150,50)
  38.   });
  39.     
  40. function createMarker(latlng, html) {
  41.     var contentString = html;
  42.     var marker = new google.maps.Marker({
  43.         position: latlng,
  44.         map: map,
  45.         zIndex: Math.round(latlng.lat()*-100000)<<5
  46.         });
  47.         
  48.     google.maps.event.addListener(marker, 'click', function() {
  49.         infowindow.setContent(contentString); 
  50.         infowindow.open(map,marker);
  51.         });
  52.         }
  53.  
  54. </script>
  55. <script type="text/javascript"> 
  56. //<![CDATA[
  57. var map2 = null;
  58. function initialize2() {
  59.  var myOptions2 = {
  60.     zoom: 13,
  61.     center: new google.maps.LatLng(36.488661268293136, -4.986934661865234),
  62.     mapTypeControl: true,
  63.     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  64.     navigationControl: true,
  65.     mapTypeId: google.maps.MapTypeId.ROADMAP
  66.   }
  67.   map2 = new google.maps.Map(document.getElementById("map_canvas2"),
  68.                                 myOptions2);
  69.  
  70.   google.maps.event.addListener(map2, 'click', function() {
  71.         infowindow.close();
  72.         });
  73.   // Add markers to the map
  74.   // Set up markers with info windows     
  75.       
  76.         var point =  new google.maps.LatLng(36.502530170146976, -4.951658248901367);
  77.       var marker2 = createMarker(point,'<div style="width:240px">Dama de Noche, apartments 2, 3 and 4 bedrooms, near Puerto Banus and beach, sleeps 4-8 <a href="dama_de_noche_puerto_banus.htm">Link<\/a><\/div>')
  78.           
  79. }
  80.  
  81. var infowindow = new google.maps.InfoWindow(
  82.   { 
  83.     size: new google.maps.Size(150,50)
  84.   });
  85.     
  86. function createMarker2(latlng, html) {
  87.     var contentString = html;
  88.          var marker2 = new google.maps.Marker({
  89.         position: latlng,
  90.         map: map2,
  91.         zIndex: Math.round(latlng.lat()*-100000)<<5
  92.         });
  93.         
  94.         google.maps.event.addListener(marker2, 'click', function() {
  95.         infowindow.setContent(contentString); 
  96.         infowindow.open(map2,marker2);
  97.         });
  98. }
  99.  </script>
  #8 (permalink)  
Antiguo 04/12/2012, 13:13
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: google map v3, 3 maps on same page
He tardado un poco pero creo que ha merecido la pena.

Te decía para crear tres archivos. No obstante, he optado por hacerlo todo en uno (todo dentro una única función window.onload = function () ) como lo estabas planteando.

Dado que era difícil controlar en qué punto estaba cada marcador (y en cada mapa había una coordenada de centrado y otra de posición del marcador), he optado por construir a mi estilo los tres mapas.

Verás que hay diferencias de código. Dejo a tu cargo el modificar lo que quieras.

Por otra parte, no he visto la ventana del tercer mapa, así que he puesto un texto aleatorio. (Y por las dudas, comprueba latitud y longitud de los puntos).
Ahí va el código completo:

Código Javascript: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7.     <title>Tres mapas</title>
  8.     <link rel="shortcut icon" type="image/ico" href="http://www.digitaleando.com/imag/logo.ico" />
  9.     <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
  10.     <script type="text/javascript">
  11.     window.onload = function () {
  12.       var latLng = new google.maps.LatLng(36.50856685143835, -4.866085052490234);
  13.       var opciones = {
  14.         center: latLng,
  15.         zoom: 13,
  16.         mapTypeId: google.maps.MapTypeId.ROADMAP
  17.       };
  18.       var map = new google.maps.Map(document.getElementById("map_canvas"), opciones);
  19.       var marker = new google.maps.Marker({
  20.         position: latLng,
  21.         map: map
  22.       });
  23.       var contenido = '<div style="width:240px">Banana Beach, several 2 and 3 bedrooms, beach front apartments in a beautiful complex, sleeps 4-6 persons <a href="banana_beach_beachfront_apartment_marbella.htm">Link<\/a><\/div>';
  24.       var infowindow = new google.maps.InfoWindow({
  25.         content: contenido,
  26.         maxWidth: 320
  27.       });
  28.       google.maps.event.addListener(marker, 'click', function () {
  29.         infowindow.open(map, marker);
  30.       });
  31.       
  32.       // Segundo mapa     
  33.       var latLng2 = new google.maps.LatLng(36.488661268293136, -4.986934661865234);
  34.       var opciones = {
  35.         center: latLng2,
  36.         zoom: 13,
  37.         mapTypeId: google.maps.MapTypeId.ROADMAP
  38.       };
  39.       var map2 = new google.maps.Map(document.getElementById("map_canvas2"), opciones);
  40.       var marker2 = new google.maps.Marker({
  41.         position: latLng2,
  42.         map: map2
  43.       });
  44.       var contenido2 = '<div style="width:240px">Dama de Noche, apartments 2, 3 and 4 bedrooms, near Puerto Banus and beach, sleeps 4-8 <a href="dama_de_noche_puerto_banus.htm">Link<\/a><\/div>';
  45.       var infowindow2 = new google.maps.InfoWindow({
  46.         content: contenido2,
  47.         maxWidth: 320
  48.       });
  49.       google.maps.event.addListener(marker2, 'click', function () {
  50.         infowindow2.open(map2, marker2);
  51.       });
  52.       // Tercer mapa      
  53.       var latLng3 = new google.maps.LatLng(36.502530170146976, -4.951658248901367);
  54.       var opciones = {
  55.         center: latLng3,
  56.         zoom: 13,
  57.         mapTypeId: google.maps.MapTypeId.ROADMAP
  58.       };
  59.       var map3 = new google.maps.Map(document.getElementById("map_canvas3"), opciones);
  60.       var marker3 = new google.maps.Marker({
  61.         position: latLng3,
  62.         map: map3
  63.       });
  64.       var contenido3 = '<div style="width:240px">El contenido de tu tercera ventana<a href="#">Link<\/a><\/div>';
  65.       var infowindow3 = new google.maps.InfoWindow({
  66.         content: contenido3,
  67.         maxWidth: 320
  68.       });
  69.       google.maps.event.addListener(marker3, 'click', function () {
  70.         infowindow3.open(map3, marker3);
  71.       });
  72.     }
  73.     </script>
  74.   </head>
  75.   <body><div id="map_canvas" style="width: 580px; height: 400px"></div> 
  76.  <div id="map_canvas2" style="width: 580px; height: 400px"></div>
  77.  <div id="map_canvas3" style="width: 580px; height: 400px"></div>
  78.   </body>
  79. </html>​
  #9 (permalink)  
Antiguo 04/12/2012, 15:06
 
Fecha de Ingreso: mayo-2009
Mensajes: 382
Antigüedad: 14 años, 10 meses
Puntos: 6
Respuesta: google map v3, 3 maps on same page
wow, montón de gracias, puf, habría que renombrarlo todo y hacer variables, como dije hasta alli no llego.
Seguro que esto va a servir a más de uno.
Ahora a meter un montón de marcadores en esos mapas, ya que al hacerlo así se puede tener mas de un marcador en cada mapa.
Gracias de nuevo.
  #10 (permalink)  
Antiguo 04/12/2012, 15:54
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: google map v3, 3 maps on same page
Como reflexión final, pasar de V2 a V3 es cambiar la programación. Los tutoriales que se presentan lo único que hacen es comparar, porque la programación es diferente.

Con otros estilos, para tí helenp y para quienes puedan utilizarlo, he dejado el mapa AQUI.

Saludos
  #11 (permalink)  
Antiguo 04/12/2012, 16:20
 
Fecha de Ingreso: mayo-2009
Mensajes: 382
Antigüedad: 14 años, 10 meses
Puntos: 6
Respuesta: google map v3, 3 maps on same page
Cita:
Iniciado por txemaarbulo Ver Mensaje
Como reflexión final, pasar de V2 a V3 es cambiar la programación. Los tutoriales que se presentan lo único que hacen es comparar, porque la programación es diferente.

Con otros estilos, para tí helenp y para quienes puedan utilizarlo, he dejado el mapa [url="http://www.digitaleando.com/mapas/mapa-tresmapas.html"]AQUI[/url].

Saludos
Gracias de nuevo, a ver si aparece en google, ya que hay mas de uno buscandolo!!!

Etiquetas: google, map
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:59.