google gmaps bootstrap google-maps responsive-design

google maps - gmaps - Responsive Google Map?



google maps api responsive (11)

Mi respuesta [Solución] Google Map en Foundation 4 Modal

JS

Cree un archivo JavaScript externo (es decir, mymap.js) con el siguiente código

google.maps.visualRefresh = true; //Optional var respMap; function mymapini() { var mapPos = new google.maps.LatLng(-0.172175,1.5); //Set the coordinates var mapOpts = { zoom: 10, //You can change this according your needs disableDefaultUI: true, //Disabling UI Controls (Optional) center: mapPos, //Center the map according coordinates mapTypeId: google.maps.MapTypeId.ROADMAP }; respMap = new google.maps.Map(document.getElementById(''mymap''), mapOpts); var mapMarker = new google.maps.Marker({ position: mapPos, map: respMap, title: ''You can put any title'' }); //This centers automatically to the marker even if you resize your window google.maps.event.addListener(respMap, ''idle'', function() { window.setTimeout(function() { respMap.panTo(mapPos.getPosition()); }, 250); }); } google.maps.event.addDomListener(window, ''load'', mymapini); $("#modalOpen").click(function(){ //Use it like <a href="#" id="modalOpen"... $("#myModal").show(); //ID from the Modal <div id="myModal">... google.maps.event.trigger(respMap, ''resize''); });

HTML

Agregue el siguiente código antes de la etiqueta:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/mymap.js"></script>

Agregue esto al código modal:

<div id="mymap"></div>

CSS

Agregue esto a su hoja de estilo:

#mymap { margin: 0; padding: 0; width:100%; height: 400px;}

Cómo hacer un mapa de Google receptivo desde el código

<div class="map"> <iframe>...</iframe> </div>

Yo uso en CSS para un mapa completo

.map{max-width:100%;}

y pequeño dispositivo

.map{max-width:40%;}

pero no funcionó.

Alguien tiene idea? Gracias.


Agregar un 100% a los atributos de ancho y alto de su iframe siempre me ha funcionado. Por ejemplo

<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=+&amp;q=surat&amp;ie=UTF8&amp;hq=&amp;hnear=Surat,+Gujarat&amp;ll=21.195,72.819444&amp;spn=0.36299,0.676346&amp;t=m&amp;z=11&amp;output=embed"></iframe><br />


Agregue esto a su función de inicialización:

<script type="text/javascript"> function initialize() { var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); // Resize stuff... google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); } </script>


Aquí una solución CSS estándar + JS para el cambio de tamaño de la altura del mapa

CSS

#map_canvas { width: 100%; }

JS

// On Resize $(window).resize(function(){ $(''#map_canvas'').height($( window ).height());

Demostración de JsFiddle: http://jsfiddle.net/3VKQ8/33/


Creo que la forma más simple será agregar este CSS y funcionará perfectamente.

embed, object, iframe{max-width: 100%;}


Es mejor usar Google Map API. He creado un ejemplo aquí: http://jsfiddle.net/eugenebolotin/8m1s69e5/1/

Las características clave son el uso de funciones:

//Full example is here: http://jsfiddle.net/eugenebolotin/8m1s69e5/1/ map.setCenter(map_center); // Scale map to fit specified points map.fitBounds(path_bounds);

Maneja el evento de cambio de tamaño y ajusta automáticamente el tamaño.


Esto es posible a través del evento window.resize y puede aplicarlo en google map como google.maps.event.addDomListener(window, ''resize'', initialize);

Considere el siguiente ejemplo:

function initialize() { var mapOptions = { zoom: 9, center: new google.maps.LatLng(28.9285745, 77.09149350000007),   mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById(''location-canvas''), mapOptions); var marker = new google.maps.Marker({ map: map, draggable: false, position: new google.maps.LatLng(28.9285745, 77.09149350000007) }); } google.maps.event.addDomListener(window, ''resize'', initialize); google.maps.event.addDomListener(window, ''load'', initialize);


Lo intenté con CSS, pero nunca respondió al 100%, así que construí una solución pura de javascript. Este usa jQuery,

google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); resizeMap(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); function resizeMap(){ var h = window.innerHeight; var w = window.innerWidth; $("#map_canvas").width(w/2); $("#map_canvas").height(h-50); }


Mi solución basada en la respuesta de eugenemail:

1. HTML - API de Google Maps

Obtener clave de API

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

2. HTML - Lienzo

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

3. CSS - Mapa del lienzo

#map_canvas { height: 400px; }

4. JavaScript

function initialize() { var lat = 40.759300; var lng = -73.985712; var map_center = new google.maps.LatLng(lat, lng); var mapOptions = { center: map_center, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP }; var mapCanvas = document.getElementById("map_canvas"); var map = new google.maps.Map(mapCanvas, mapOptions); new google.maps.Marker({ map: map, draggable: false, position: new google.maps.LatLng(lat, lng) }); google.maps.event.addDomListener(window, ''resize'', function() { map.setCenter(map_center); }); } initialize();


Mire esto para una solución: http://jsfiddle.net/panchroma/5AEEV/

Sin embargo, no me puedo atribuir el mérito del código, sino que se trata de una forma rápida y fácil de hacer que google maps iframe incruste la respuesta .

¡Buena suerte!

CSS

#map_canvas{ width:50%; height:300px !important; }

HTML

<!DOCTYPE html> <html> <head> <title>Google Maps JavaScript API v3 Example: Map Simple</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta charset="utf-8"/> <style> html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(''map_canvas''), mapOptions); } google.maps.event.addDomListener(window, ''load'', initialize); </script> </head> <body> <div id="map_canvas"></div> </body> </html>


Una solución sin javascript:

HTML:

<div class="google-maps"> <iframe>........//Google Maps Code//..........</iframe> </div>

CSS:

.google-maps { position: relative; padding-bottom: 75%; // This is the aspect ratio height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

Si tiene un tamaño de mapa personalizado, elimine la "altura: 100%! Importante"