Question

我有一个使用iframe的嵌入式地图，并希望更改为使用api。我使用谷歌网站上的代码进行测试，添加了api密钥，但地图没有显示在我的网页上。我有什么想法我做错了吗？ http://www.lithicsireland.ie/Archaeology_Projects_Irish_Lithic_Landscapes_Chert_Provenancing.html 我使用的代码是：

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: { lat: -34.397, lng: 150.644},
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById('mapbox'),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()"> 
<div class="mapcontainer"><div class="mapbox"></div>
</div>

在css中我有：

      .mapcontainer {
    float: left;
    width: 100%;
    margin: 0em 5%;
    padding: 1em;
    }

    .mapbox {
    float: left;
    width: 90%;
    margin: 0em 5%;
    padding: 1em;
    }

Answer 1

页面上没有id =“mapbox”的div（它有一个“mapbox”类。）

如果使用getElementsByClassName（'mapbox'）[0]来获取对地图的引用（并给它一个合理的高度），它就有效。

function initialize() {
    var mapOptions = {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementsByClassName('mapbox')[0],
    mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

working fiddle

代码段

function initialize() {
  var mapOptions = {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  };
  var map = new google.maps.Map(document.getElementsByClassName('mapbox')[0],
    mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

.mapcontainer {
  width: 500px;
  height: 500px;
  margin: 0em 5%;
  padding: 1em;
}
.mapbox {
  width: 400px;
  height: 400px;
  margin: 0em 5%;
  padding: 1em;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="d2 box">
  <ul>
    <li>Lithics Ireland Consultancy</li>
    <li><a href="https://plus.google.com/100271090634486556106" rel="author"> Killian Driscoll</a>

    </li>
    <li>lithicsireland@gmail.com</li>
    <li>Galway, Ireland</li>
  </ul>
</div>
<div class="d2 box">
  <div class="mapcontainer">
    <div class="mapbox"></div>
  </div>
</div>

如果你想使用同样有效的id =“mapbox”：

working jsfiddle

代码段

function initialize() {
  var mapOptions = {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  };
  var map = new google.maps.Map(document.getElementById('mapbox'),
    mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

.mapcontainer {
  width: 500px;
  height: 500px;
  margin: 0em 5%;
  padding: 1em;
}
#mapbox {
  width: 400px;
  height: 400px;
  margin: 0em 5%;
  padding: 1em;
}
html,
body {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="d2 box">
  <ul>
    <li>Lithics Ireland Consultancy</li>
    <li><a href="https://plus.google.com/100271090634486556106" rel="author"> Killian Driscoll</a>

    </li>
    <li>lithicsireland@gmail.com</li>
    <li>Galway, Ireland</li>
  </ul>
</div>
<div class="d2 box">
  <div class="mapcontainer">
    <div id="mapbox"></div>
  </div>
</div>

格式化谷歌地图API时出错。无法查看嵌入了api的谷歌地图

1 个答案: