响应式Google地图v3 - 无法获得100％的高度

时间：2015-09-30 12:47:21

标签： css google-maps google-maps-api-3

现在已经有一段时间了，我需要将地图高度设为其容器的100％。并且在调整大小时也保持中心。

我在这里尝试了几乎所有的例子但没有用。

下面的代码示例显示了我正在使用的内容，那里有标记和infowindows以及自定义标记符号。我在控制台中没有收到任何错误。

   <script type="text/javascript">
    var markers = [
        {
            "title": 'xxxxx School',
            "lat": '53.004758',
            "lng": '-2.241232',
            "description": '<br/><a href="http://www.google.com">View more info</a>',
            "type": 'UK Independent School'
        },
        {
            "title": 'xxxxx Prep',
            "lat": '51.470123',
            "lng": '-0.209838',
            "description": '<br/><a href="http://www.google.com">View more info</a>',
            "type": 'UK Independent School'
        },
        {
            "title": 'xxxxxx',
            "lat": '46.709741',
            "lng": '9.159625',
            "description": '<br/><a href="http://www.google.com">View more info</a>',
            "type": 'Swiss Boarding School'
        },
        {
            "title": 'xxxxxxx independent College',
            "lat": '51.512103',
            "lng": '-0.308055',
            "description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
            "type": 'UK Independent School'
        },
        {
            "title": 'xxxxxxx Hill',
            "lat": '51.007720',
            "lng": '0.217913',
            "description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
            "type": 'UK Independent School'
        }
    ];

    var map;
    function initMap() {

        var mapOptions = {
            center: new google.maps.LatLng(51.507351, -0.127758),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
            };
        var infoWindow = new google.maps.InfoWindow();
        var latlngbounds = new google.maps.LatLngBounds();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var i = 0;
        var interval = setInterval(function () {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var icon = "";
            switch (data.type) {
                case "UK Independent School":
                    icon = "orange";
                    break;
                case "Swiss Boarding School":
                    icon = "green";
                    break;
            }
            icon = "http://fokn.temp-dns.com/images/site/icon-" + icon + ".png";
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                animation: google.maps.Animation.DROP,
                icon: new google.maps.MarkerImage(icon)
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            latlngbounds.extend(marker.position);
            i++;
            if (i == markers.length) {
                clearInterval(interval);
                var bounds = new google.maps.LatLngBounds();
                map.setCenter(latlngbounds.getCenter());
                map.fitBounds(latlngbounds);
            }
        }, 80);
    }
</script>

        <div style="width:100%; height:100%;">      
            <div id="dvMap" style="width:100%; height:100%;"></div>
        </div>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY-API&callback=initMap"></script>

1 个答案:

答案 0 :(得分：1)

您需要为<html>元素之前的所有元素指定大小：

html, body, #dvMap {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

Mike Williams' Google Maps Javascript API v2 page on this subject: Using a percentage height for the map div

proof of concept fiddle

代码段 

var markers = [{
  "title": 'xxxxx School',
  "lat": '53.004758',
  "lng": '-2.241232',
  "description": '<br/><a href="http://www.google.com">View more info</a>',
  "type": 'UK Independent School'
}, {
  "title": 'xxxxx Prep',
  "lat": '51.470123',
  "lng": '-0.209838',
  "description": '<br/><a href="http://www.google.com">View more info</a>',
  "type": 'UK Independent School'
}, {
  "title": 'xxxxxx',
  "lat": '46.709741',
  "lng": '9.159625',
  "description": '<br/><a href="http://www.google.com">View more info</a>',
  "type": 'Swiss Boarding School'
}, {
  "title": 'xxxxxxx independent College',
  "lat": '51.512103',
  "lng": '-0.308055',
  "description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
  "type": 'UK Independent School'
}, {
  "title": 'xxxxxxx Hill',
  "lat": '51.007720',
  "lng": '0.217913',
  "description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
  "type": 'UK Independent School'
}];

var map;

function initMap() {

  var mapOptions = {
    center: new google.maps.LatLng(51.507351, -0.127758),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      "featureType": "landscape",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 65
      }, {
        "visibility": "on"
      }]
    }, {
      "featureType": "poi",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 51
      }, {
        "visibility": "simplified"
      }]
    }, {
      "featureType": "road.highway",
      "stylers": [{
        "saturation": -100
      }, {
        "visibility": "simplified"
      }]
    }, {
      "featureType": "road.arterial",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 30
      }, {
        "visibility": "on"
      }]
    }, {
      "featureType": "road.local",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 40
      }, {
        "visibility": "on"
      }]
    }, {
      "featureType": "transit",
      "stylers": [{
        "saturation": -100
      }, {
        "visibility": "simplified"
      }]
    }, {
      "featureType": "administrative.province",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "water",
      "elementType": "labels",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": -25
      }, {
        "saturation": -100
      }]
    }, {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{
        "hue": "#ffff00"
      }, {
        "lightness": -25
      }, {
        "saturation": -97
      }]
    }]
  };
  var infoWindow = new google.maps.InfoWindow();
  var latlngbounds = new google.maps.LatLngBounds();
  var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
  var i = 0;
  var interval = setInterval(function() {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    var icon = "";
    switch (data.type) {
      case "UK Independent School":
        icon = "orange";
        break;
      case "Swiss Boarding School":
        icon = "green";
        break;
    }
    icon = "http://maps.google.com/mapfiles/ms/micons/" + icon + ".png";
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: data.title,
      animation: google.maps.Animation.DROP,
      icon: icon
    });
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>");
        infoWindow.open(map, marker);
      });
    })(marker, data);
    latlngbounds.extend(marker.position);
    i++;
    if (i == markers.length) {
      clearInterval(interval);
      var bounds = new google.maps.LatLngBounds();
      map.setCenter(latlngbounds.getCenter());
      map.fitBounds(latlngbounds);
    }
  }, 80);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style="width:100%; height:100%;">
  <div id="dvMap"></div>
</div>

相关问题
最新问题