Карта Google Maps API не отображается - PullRequest
Новая
       2

Карта Google Maps API не отображается

4 голосов
/ 18 сентября 2010

Мне не удается отобразить карту, когда я использую API Карт Google.Я пытаюсь создать приложение, и оно не будет работать там, но оно также не работает на этой странице тестирования, которую я создал.Кто-нибудь знает, что я делаю не так? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    console.log("Initializing...");
  var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
</script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="height: 100%; width: 100%;"></div>
</body>
</html>

Спасибо за любую помощь.Я очень смущен!

Ответы [ 3 ]

19 голосов
/ 19 сентября 2010

Дайте вашему map_canvas div фиксированную ширину и высоту, и ваш пример будет работать нормально: 

<div id="map_canvas" style="width: 500px; height: 400px;"></div>

В противном случае установите высоту на html и body, как это делает Google в учебниках по API : 

<style type="text/css"> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
2 голосов
/ 10 декабря 2012

Возможно, вы захотите создать собственный CSS для этого div, который содержит карту.я сделал ниже кодирование в моем CSS .. Надеюсь, это поможет: D ура !! 

.map
{
/*    padding:5px;*/
    float:left;
    background-image:url('../images/mapContainer.png');
    width: 155px;
    height: 123px;
    background-repeat: no-repeat;
}
.mapImage
{
    padding-top: 4px;
    padding-left: 4px;
    width: 146px;
    height: 114px;
}
.mapAndInfoContainer
{
    float:left;
    width: 100%;
    height: 120px;
}
0 голосов
/ 19 сентября 2010

похоже, что он не отображается на живом сайте моего клиента.Это работало до пару дней назад.Возможно, гугл обновил js и что-то сломалось?Потому что ничего не изменилось на моей стороне ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...