Responsive Google Map?

后端未结

关注

 13  1568

How to make a responsive google map from the code

...

I use in css

相关标签:

13条回答

野性不改

2020-12-07 10:46

A solution without 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;
}

If you have a custom map size, remove the "height: 100% !important"

0 讨论(0)

醉酒成梦

2020-12-07 10:46
i think the simplest way will be to add this css and it will work perfectly.
```
embed, object, iframe{max-width: 100%;}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

野趣味

2020-12-07 10:52

Add this to your initialize function:

<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>

0 讨论(0)

予麋鹿

2020-12-07 10:52

Adding a 100% to the width and height attributes of its iframe has always worked for me. For example

<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 />

0 讨论(0)

刺人心

2020-12-07 10:53

Check this for a solution: http://jsfiddle.net/panchroma/5AEEV/

I can't take the credit for the code though, it comes from quick and easy way to make google maps iframe embed responsive.

Good luck!

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>

0 讨论(0)

南方客

2020-12-07 10:55
Here a standard CSS solution + JS for the map's height resizing

CSS
```
#map_canvas {
   width: 100%;
}
```
JS
```
// On Resize
$(window).resize(function(){ 
    $('#map_canvas').height($( window ).height());
```
JsFiddle demo : http://jsfiddle.net/3VKQ8/33/
0 讨论(0)
发布评论:

提交评论
- 加载中...