Je ne peux pas voir la carte réelle lorsque vous utilisez Google Maps API

Question

<!DOCTYPE>

<style type="text/css">
  body {
    margin: 0;
    padding: 10px 20px 20px;
    font-family: Arial;
    font-size: 16px;
  }

  #map-container {
    padding: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #ccc #999 #ccc;
    -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
    width: 100%;
  }

  #map {
    width: 100%;
    height: 98%;
  }

</style>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="data/weblandmark.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(48.133333, 11.566667);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var dataPhoto = data.weblandmarks[i];
      var latLng = new google.maps.LatLng(dataPhoto.latitude,
          dataPhoto.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer (map, markers);
  }
</script>

J'utilise des cartes API de cartes avec MarkerCluster pour montrer de nombreux endroits Je peux voir la barre de zoom, ainsi que le cluster généré par MarkerCluster mais pas l'image de carte réelle pourquoi?

Answer 1

Try adding the following CSS:

html { height: 100%; }
body { height: 100%; }

Answer 2

You could try making your map like this:

//The options for the google map
var mapOptions = {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP //Or whatever you want
};

var map = new google.maps.Map(document.getElementById('#map'), mapOptions);

This is nitpicky but it makes it alot easier to work with the map if you have to add a lot of information to it later (markers/listeners/zooms after load)