JavaScript - ayuda con mapa google y bootstrap

 
Vista:
Imágen de perfil de vicente
Val: 30
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con mapa google y bootstrap

Publicado por vicente (15 intervenciones) el 08/12/2016 17:03:36
hola buenas tardes....

Alguien que sepa mas que yo de javascript me puede echar una mano con un mapa de google , que no consigo hacer responsive.......

no es un mapa iframe , es un mapa api y como tal funciona con javascript....... el problema que tengo es que consigo hacerlo responsive en lo que a width se refiere , pero no en lo que a height se se refiere......
en cuanto cambio la medida height que tiene puesta en pixeles a auto o % , el mapa desaparece......., en definitiva que ya se me acaban las ideas para hacerlo responsive...........

si ha alguien le ha pasado algo asi y/o sabe como solventar este problema agradeceria cualquier ayuda o sugerencia....

subo codigo por si se me hubiera pasado algo pero ya lo he revisado 1000veces y no veo ningun error...
codigo css
1
2
3
4
5
6
7
8
/*esta clase no la uso pues como el clo-lg-8 de bootstrap tiene ese mismo width, uso la clase de bootstrap*/
.map-container{
	margin-left:0;
	width:66%;/*739px medida anterior y original del map que he pasado a % y me funciona bien*/
}
.map{
	height:650px;/*400px medida anterior u original del mapa que no me deja pasar ni a auto , ni a %*/
}
codigo html donde en teoria se pondra el mapa
1
2
3
<div class="col-lg-8 col-xs-12">
            <div id="google-map" class="map"></div>
</div>
codigo javascript he intenatado ponerlo pero no me deja.....
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 kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con mapa google y bootstrap

Publicado por kip (107 intervenciones) el 10/12/2016 00:59:04
Hola, has probado usando la clase embed-responsive que te ofrece bootstrap para iframes, podrias intentarlo asi:

1
2
3
4
5
<div class="col-lg-8 col-xs-12">
	<div class="embed-responsive embed-responsive-16by9">
		<div id="google-map" class="embed-responsive-item"></div>
	</div>
</div>

http://getbootstrap.com/components/#responsive-embed

Cuentanos si te funciona, a ver si intentamos algo mas.
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 vicente
Val: 30
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con mapa google y bootstrap

Publicado por vicente (15 intervenciones) el 10/12/2016 10:42:17
no, no lo he probado , por no tratarse de un iframe , sino de un mapa javascript, que cojo por mdeio de la api de google...... pero por probar no pierdo nada.....
gracias por tu respuesta....

saludos
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 vicente
Val: 30
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con mapa google y bootstrap

Publicado por vicente (15 intervenciones) el 10/12/2016 11:22:46
Hola nuevamente despues de probarlo estoy igual que estaba .....

me responsiviza en width pero no en height.......

para que responsivizara bien en todas las resoluciones deberia de crear media queries de cada resolucion he ir adaptando en las clases embed-responsive y embed-responsive-item el height 100% a lo que sea en cada resolucion....

por ejemplo en una resolucion de smartphone que es de 360 x 640 px el height deberia de ser del 30%......

por otro lado la clase embed-responsive-16by9 queda deshabilitada con lo cual no puedo jugar con su porcentaje.....

trato de evitar lo de crear media queries pero si tuviera que crearlas porque no me deja otra solo meteria la calase map con height en px diferente para cada resolucion y practticamente el problema estaria solucionado ...

el problema es que parece ser que el bootstrap me coje de archivos .less como......
scaffolding.less
grid-framework.less
y archivos asi en ningun momento cuando cambio de resolucion el inspector me muestra que media queries esta usando........
de hecho hice una prueba con
1
@media (min-width:768px){}
y dentro de esa media querie le puse la clase map con distinto pixelaje y nada de nada como si no leyera la media querie

si se te ocurre algo mas, estoy abierto a sugerencias y a ir probando lo que sea con tal de conseguir que funcione.....

pienso que la solucion pasaria por crearle un resize en javascript pero como ando muy verde en javaxcript pues ni lo intentado....
gracias por tu respuesta y saludos
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