Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » cómo insertar dos mapas de google maps

JQuery - cómo insertar dos mapas de google maps

Volver
Nuevo Tema
<<>>
 
Vista:

cómo insertar dos mapas de google maps

Publicado por kiskes (4 intervenciones) el 18/09/2014 19:43:13
Hola,

Estoy intentando mostrar dos mapas en una misma página, con mismos estilos de color, etc... y con sus respectivas marcas de localización y sólo consigo que muestre un mapa. Os dejo el código que muestra un mapa.

En el codigo HTML tengo dos divs (map1 y map2)

Gracias.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function initialize() {
	var styles = [
	{
		stylers: [
		{ hue: "#008000" },
		{ saturation: -20 }
		]
	},{
		featureType: "road",
		elementType: "geometry",
		stylers: [
		{ lightness: 100 },
		{ visibility: "simplified" }
		]
	},{
		featureType: "road",
		elementType: "labels",
		stylers: [
		{ visibility: "off" }
		]
	}
	];
 
	var styledMap = new google.maps.StyledMapType(styles,
	{name: "Styled Map"});
 
	var mapOptions = {
	zoom: 15,
	center: new google.maps.LatLng(42.423262, -2.694112),
	mapTypeControlOptions: {
		mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
	}
 
 
}
 
	var map = new google.maps.Map(document.getElementById("map1"), mapOptions);
 
	var marker = new google.maps.Marker({ position: map.getCenter(), map: map, title: '',
	icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png', cursor: 'default', draggable: true });
 
	map.mapTypes.set('map_style', styledMap);
	map.setMapTypeId('map_style');
 
	}
 
 
function loadScript() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
	document.body.appendChild(script);
}
 
window.onload = loadScript;
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema
Val: 32
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

cómo insertar dos mapas de google maps

Publicado por txema (9 intervenciones) el 19/09/2014 01:33:38
Con el permiso de lawebdelprogramador, te envío un enlace ya viejo (dic/2012) donde presento tres mapas en una sola página. Presentación de tres mapas en una página

Veo que tienes diferentes estilos de mapas. Se pueden conjugar (revisa códigos en Aportes Google Maps)

Presento códigos y ejemplos.

Si quieres algo específico coméntamelo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

cómo insertar dos mapas de google maps

Publicado por kiskes (4 intervenciones) el 22/09/2014 10:53:50
Hola Txema,

Gracias por la respuesta. Pero ahora no consigo aplicar el mismo estilo de mapas a los dos mapas (Color y demás).
Sólo consigo que me muestre mi estilo de mapa en uno. Y si intento aplicar a los dos, no se muestran los mapas.

Gracias por la ayuda, de antemano.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 32
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

cómo insertar dos mapas de google maps

Publicado por txema (9 intervenciones) el 22/09/2014 11:17:49
Te comento de memoria, ya que hasta la noche no tendré tiempo de probarlo, pero debe funcionar.

Estilos de cada mapa:

Cuando yo defino un mapa lo hago, por ejemplo, con
1
map = new google.maps.Map(document.getElementById("mapa"), myOptions);
donde myOptions define el estilo, zoom y una serie de parámetros.

Si tengo dos mapas, podría darles el mismo estilo con la misma definición de opciones o crear otra nueva como myOptions2 con nuevas propiedades.
1
map = new google.maps.Map(document.getElementById("mapa2"), myOptions2);


Desde mi experiencia real, esto funciona. Lo que te puede ocurrir es que Google Maps tarde o complique en presentar los "azulejos" del segundo mapa.

Si puedes, prueba el código bajo estas premisas, y si tienes problemas, lo comentas e incluyes el código que hayas generado.

Coméntalo sea que lo soluciones o persistan problemas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

cómo insertar dos mapas de google maps

Publicado por kiskes (4 intervenciones) el 22/09/2014 11:28:34
Hola Txema,

te dejo el código del enlace que me mandaste con las modificaciones. Como está, sólo aplica el estilo al primer mapa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
window.onload = function () {
          var estilo = [
                    {
                      stylers: [
                        { hue: "#008000" },
                        { saturation: -20 }
                      ]
                    },{
                      featureType: "road",
                      elementType: "geometry",
                      stylers: [
                        { lightness: 100 },
                        { visibility: "simplified" }
                      ]
                    },{
                      featureType: "road",
                      elementType: "labels",
                      stylers: [
                        { visibility: "off" }
                      ]
                    }
                  ];
 
 
         var latLng = new google.maps.LatLng(36.50856685143835, -4.866085052490234);
         var opciones = {
           center: latLng,
           zoom: 15,
           mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'estilo']
                    }
         };
         var map = new google.maps.Map(document.getElementById("map_canvas"), opciones);
            var mapType = new google.maps.StyledMapType(estilo, { name: "Mi Estilo" });
            map.mapTypes.set('estilo', mapType);
            map.setMapTypeId('estilo');
         var marker = new google.maps.Marker({
           position: latLng,
           map: map
         });
 
         google.maps.event.addListener(marker, 'click', function () {
           infowindow.open(map, marker);
         });
 
 
         // Segundo mapa    

          var estilo2 = [
                    {
                      stylers: [
                        { hue: "#008000" },
                        { saturation: -20 }
                      ]
                    },{
                      featureType: "road",
                      elementType: "geometry",
                      stylers: [
                        { lightness: 100 },
                        { visibility: "simplified" }
                      ]
                    },{
                      featureType: "road",
                      elementType: "labels",
                      stylers: [
                        { visibility: "off" }
                      ]
                    }
                  ];
 
         var latLng2 = new google.maps.LatLng(36.488661268293136, -4.986934661865234);
         var opciones2 = {
           center: latLng2,
           zoom: 15,
           mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'estilo2']
                    }
         };
         var map2 = new google.maps.Map(document.getElementById("map_canvas2"), opciones2);
            var mapType = new google.maps.StyledMapType(estilo2, { name: "Estilo" });
            map.mapTypes.set('estilo2', mapType);
            map.setMapTypeId('estilo2');
         var marker2 = new google.maps.Marker({
           position: latLng2,
           map: map2
         });
 
         google.maps.event.addListener(marker2, 'click', function () {
           infowindow2.open(map2, marker2);
         });
 
       }
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 32
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

cómo insertar dos mapas de google maps

Publicado por txema (9 intervenciones) el 22/09/2014 18:58:42
Hola kiskes:

Hay algunos elementos que duplicas en el estilo y posiblemente por ello no descarga el segundo estilo (no dispongo de tiempo para hacer un peritaje de tu código aunque básicamente lo aplicaste bien).

Fíjate en tus duplicidades:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* ... */,{
                      featureType: "road",
                      elementType: "geometry",
                      stylers: [
                        { lightness: 100 },
                        { visibility: "simplified" }
                      ]
                    },{
                      featureType: "road",
                      elementType: "labels",
                      stylers: [
                        { visibility: "off" }
                      ]
                    }
/* ... */

Salvando el tema, he probado este código y, como verás, adapta bien diferentes estinos a dos mapas en la misma página (he modificado algo los labels para mostrarte que hay diferentes formas para presentarlos) en versión 2014 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<!--[if lt IE 9]>

	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

	<![endif]-->
    <title>Dos mapas</title>
<style type="text/css">
html,body{height:100%;margin:0;padding:0}
#mapa, #mapa2{height:45%}

</style>
   <link rel="shortcut icon" type="image/ico" href="http://www.digitaleando.com/imag/logo.ico" />
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
    <script type="text/javascript">
window.onload = function () {
    var estilo = [{
        stylers: [{
            hue: "#008000"
        }, {
            saturation: -20
        }]
    }, {
        featureType: "road",
        elementType: "geometry",
        stylers: [{
            lightness: 100
        }, {
            visibility: "simplified"
        }]
    }];
    var latLng = new google.maps.LatLng(36.508567, -4.866085);
    var opciones = {
        center: latLng,
        zoom: 15,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'estilo']
        }
    };
    var map = new google.maps.Map(document.getElementById("mapa"), opciones);
    var mapType = new google.maps.StyledMapType(estilo, {
        name: "Estilo Green"
    });
    map.mapTypes.set('estilo', mapType);
    map.setMapTypeId('estilo');
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
 
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });
 
 
    // Segundo mapa 

    var latLng2 = new google.maps.LatLng(36.488661, -4.986935);
    var stylez = [{
        featureType: "all",
        elementType: "all",
        stylers: [{
            saturation: -100
        }]
    }];
    var myOptions = {
        zoom: 15,
        center: latLng2,
        panControl: false,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, 'grayscale'],
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.TOP_LEFT
        },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map2 = new google.maps.Map(document.getElementById("mapa2"), myOptions);
    var mapType = new google.maps.StyledMapType(stylez, {
        name: "Escala grises"
    });
    map2.mapTypes.set('grayscale', mapType);
    map2.setMapTypeId('grayscale');
    var marker2 = new google.maps.Marker({
        position: latLng2,
        map: map2
    });
 
    google.maps.event.addListener(marker2, 'click', function () {
        infowindow2.open(map2, marker2);
    });
 
}
    </script>
  </head>
  <body>
    <div id="mapa"></div>
    <div id="mapa2"></div>
  </body>
</html>​

Coméntanoslo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

cómo insertar dos mapas de google maps

Publicado por kiskes (4 intervenciones) el 23/09/2014 13:12:08
Gracias Txema.

Todo perfecto, ahora sí me ha funcionado, me hacía el lío con la duplicidad de variables.

Gracias por tu ayuda y tu tiempo.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 4
Ha aumentado su posición en 11 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

cómo insertar dos mapas de google maps

Publicado por yandri (2 intervenciones) el 13/03/2018 05:51:31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!-- ###############################

##### agregar dos mapas a la página ####

############################### -->



<!-- ###################################

##### html dentro del cuerpo de la pagina ####

################################### -->



		<!-- ##############

		#### mapa uio #####

		################# -->



   <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=KEY APP'>

   </script>

   <div style='overflow:hidden;height:400px;width:100%;'>

    <div id='uio' style='height:400px;width:100%;'>

    </div>

   </div>

   <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=0e172d2ffabcb59c25732ddc906fe4a923135986'>

   </script>

   <script type='text/javascript'>

    function init_map(){

     var myOptions = {

      zoom:17,

      center:new google.maps.LatLng(-0.1197475431081178,-78.49297031248489),

      mapTypeId: google.maps.MapTypeId.ROADMAP

     };

     map = new google.maps.Map(document.getElementById('uio'),

      myOptions

     );

     marker = new google.maps.Marker({

      map: map,

      position: new google.maps.LatLng(LATITUD,LONGITUD

      )});

     infowindow = new google.maps.InfoWindow({

      content:'<strong>NOMBRE</strong><br>DIRECCION<br> Quito<br>'

     });

     google.maps.event.addListener(

      marker,

      'click',

      function(){

       infowindow.open(map,

        marker

       );

      });

     infowindow.open(map,marker

     );

    }

   google.maps.event.addDomListener(window,

    'load',

    init_map

   );

   </script>

    		<!-- ###############

		##### mapa pvo ####

		############## -->



   <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=KEY APP'>

   </script>

   <div style='overflow:hidden;height:400px;width:100%;'>

    <div id='pvo' style='height:400px;width:100%;'>

    </div>

   </div>

   <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=923b072dcc2f8df906bbcf7c7d93ea076994de0c'>

   </script>

   <script type='text/javascript'>

    function init_map(){

     var myOptions = {

      zoom:17,

      center:new google.maps.LatLng(LATITUD,LONGITUD),

      mapTypeId: google.maps.MapTypeId.ROADMAP

     };

     map = new google.maps.Map(document.getElementById('pvo'),

      myOptions);

     marker = new google.maps.Marker({

      map: map,

      position: new google.maps.LatLng(-1.0543536605578852,-80.4474147978134)

     });

     infowindow = new google.maps.InfoWindow({

      content:'<strong>LCP PVO</strong><br>Sucre 111 y Coronel Sabando<br> Portoviejo<br>'

     });

     google.maps.event.addListener(

      marker,

      'click',

      function(){

       infowindow.open(map,marker);

      });

     infowindow.open(map,marker);

    }

    google.maps.event.addDomListener(

     window,

     'load',

     init_map);

   </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 4
Ha aumentado su posición en 11 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

cómo insertar dos mapas de google maps

Publicado por yandri (2 intervenciones) el 13/03/2018 05:57:30
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- ########################

##### dentro del archivo css ####

######################## -->



#uio img{

	max-width:none!important;

	background:none!important}





#pvo img{

	max-width:none!important;

	background:none!important

}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar