无法加载Google地图

时间:2017-01-25 07:34:32

标签: html google-maps jsp bootstrap-modal

Google地图未加载。 只显示空白div

这里是我的代码段

public class Model {

@SerializedName("cust_id")
@Expose
private Integer custId;
@SerializedName("cust_uri")
@Expose
private String custUri;

public Integer getCustId() {
return custId;
}

public void setCustId(Integer custId) {
this.custId = custId;
}

public String getCustUri() {
return custUri;
}

public void setCustUri(String custUri) {
this.custUri = custUri;
}

}

我认为我的逻辑是正确的。任何人都可以帮我弄清楚问题是什么。

Thnx提前。 。 。 !

2 个答案:

答案 0 :(得分:1)

<div class="col-md-9 col-sm-12">
    <div id="map-container" style="width: 100%; height:400px;"></div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>                                 
        function init_map() {
            var var_location = new google.maps.LatLng(35.710107,73.039610);                              
            var var_mapoptions = { center: var_location, zoom:17 };                              
            var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});                              
            var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);                                 
            var_marker.setMap(var_map); 
        }                            
        google.maps.event.addDomListener(window, 'load', init_map);                              
    </script>
</div>

您需要为地图容器创建另一个div并添加宽度&amp;高度。

答案 1 :(得分:1)

首先,您需要一个您似乎没有的API密钥。

然后基本上只需按照谷歌地图api教程,就像你似乎已经做了一样。

<style>
  #map {
    height: 400px;
    width: 400px;
  }
</style>
<div id="map"></div>
<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

https://developers.google.com/maps/documentation/javascript/examples/map-simple