не могу увидеть фактическую карту при использовании Google Maps API - PullRequest
Новая
       8

не могу увидеть фактическую карту при использовании Google Maps API

1 голос
/ 17 мая 2011 
<!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>

Я использую API карты с markercluster, чтобы показать много мест Я вижу панель масштабирования, а также кластер, созданный markercluster, но не фактическое изображение карты почему?

Ответы [ 2 ]

1 голос
/ 17 мая 2011

Попробуйте добавить следующий CSS: 

html { height: 100%; }
body { height: 100%; }
0 голосов
/ 17 мая 2011

Вы можете попробовать сделать свою карту следующим образом: 

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

Это придирчиво, но намного проще работать с картой, если вам нужно добавить к ней много информации позже (маркеры /слушатели / зумы после загрузки)

...