Javascript 谷歌地图赢得'；不显示在页面加载上_Javascript_Jquery_Google Maps_Google Maps Api 3

Javascript 谷歌地图赢得'；不显示在页面加载上

javascript jquery google-maps google-maps-api-3

Javascript 谷歌地图赢得'；不显示在页面加载上,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,我正在尝试加载一个带有一些标记的谷歌地图 html如下所示，地图应该位于的div以粗体显示在底部： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.boo

我正在尝试加载一个带有一些标记的谷歌地图

html如下所示，地图应该位于的div以粗体显示在底部：

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">




<script src = "DSA.js"></script>
<script src = "DSA2.js"></script>
<script src = "ajax_ex.js"></script>
<script src = "ajax_ex2.js"></script>
<script src = "VA_map.js"></script>
</head>

<body>

<div class="row">

  <div class = "col-md-10 text-center col-md-offset-1" style = "background-color: black"> <h2><strong><u><font color = "white">DSA Homework Assignment</font></u></strong></h2></div>
  <div class = "col-md-12 text-center"> <h4>Veteran's Administration Data Presentation</h4></div>
<hr width="75%" noshade>
  </div>

<div class="row">

<div class ="col-md-5 center-image col-md-offset-1"><iframe width="100%" title="Vets by State Chart" height="425px" src="https://opendata.socrata.com/w/mwws-927d/y34g-bnf3?cur=Sp05mmmwmwS&from=root" frameborder="5"scrolling="no"><a href="https://opendata.socrata.com/dataset/Vets-by-State-Chart/mwws-927d" title="Vets by State Chart" target="_blank">Vets by State Chart</a></iframe></div>
<div class ="col-md-5 center-image"><iframe width="100%" title="Count of VA Facilities by State" height="425px" src="https://opendata.socrata.com/w/2v4d-eeq7/y34g-bnf3?cur=5HxMxZr17YJ&from=root" frameborder="5"scrolling="no"><a href="https://opendata.socrata.com/dataset/Count-of-VA-Facilities-by-State/2v4d-eeq7" title="Count of VA Facilities by State" target="_blank">Count of VA Facilities by State</a></iframe></div>

</div>

<div class = "row">

<div class ="col-md-5 center-image col-md-offset-1"><iframe width="100%" title="Vets by State Map" height="425px" src="https://opendata.socrata.com/w/9ar5-pzsn/y34g-bnf3?cur=pqQOR96frJ3&from=root" frameborder="5"scrolling="no"><a href="https://opendata.socrata.com/dataset/Vets-by-State-Map/9ar5-pzsn" title="Vets by State Map" target="_blank">Vets by State Map</a></iframe></div>
<div class ="col-md-5 center-image"><iframe width="100%" title="VETSTATS with VF Ratio" height="425px" src="https://opendata.socrata.com/w/seiw-yrax/y34g-bnf3?cur=ub5XwuOHcy2&from=root" frameborder="5"scrolling="no"><a href="https://opendata.socrata.com/dataset/VETSTATS-with-VF-Ratio/seiw-yrax" title="VETSTATS with VF Ratio" target="_blank">VETSTATS with VF Ratio</a></iframe></div>

</div>

<div class = "row">

<div class = "col-md-10 center image col-md-offset-1" >
<select id = "choice" style = "font-size: 15px">
  <option value="safety">Safety</option>
  <option value="effectiveness">Effectiveness</option>
  <option value="efficiency">Efficiency</option>
</select>
<input type = "button" class = "btn"
name = "Switch Category" value = "View Different Performance Measure" id ='btn1'/>
</div>
</div>

<div class = "row">

<div class ="col-md-10 col-md-offset-1"><iframe id = "avg_scores" width="100%" title="State Scores for Safety All Years" height="425px" src="https://opendata.socrata.com/w/8tjz-p37i/y34g-bnf3?cur=_6CZnzqxdHZ&from=root" frameborder="5"scrolling="no"><a href="https://opendata.socrata.com/dataset/State-Scores-for-Safety-All-Years/8tjz-p37i" title="State Scores for Safety All Years" target="_blank">State Scores for Safety All Years</a></iframe></div>
</div>


<div class = "row">
<div class = "col-md-10 col-md-offset-1 center-image">
<table class="table table-striped table-bordered " id = "state_table">
<tr id = "first_row">
<th>Category</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
</tr>
</table>
</div>
</div>

<div class = "row">
<div class ="col-md-5 center-image col-md-offset-1"><iframe width="100%" title="Average Improvement All Measure All Years" height="425px" src="https://opendata.socrata.com/w/n3tq-9kd3/y34g-bnf3?cur=ynVGgbZ5iqx&from=root" frameborder="5"scrolling="no"><a href="https://opendata.socrata.com/dataset/Average-Improvement-All-Measure-All-Years/n3tq-9kd3" title="Average Improvement All Measure All Years" target="_blank">Average Improvement All Measure All Years</a></iframe></div>
<div class ="col-md-5 center-image"><iframe width="100%" title="Performance Change FY10 - FY14" height="425px" src="https://opendata.socrata.com/w/nhrd-9mtk/y34g-bnf3?cur=OciuarvBqYU&from=root" frameborder="5"scrolling="no"><a href="https://opendata.socrata.com/dataset/Performance-Change-FY10-FY14/nhrd-9mtk" title="Performance Change FY10 - FY14" target="_blank">Performance Change FY10 - FY14</a></iframe></div>

</div>

<div class = "row">

<div class = "col-md-10 center image col-md-offset-1" >
<select id = "choice2" style = "font-size: 15px">
  <option value="safety">Safety</option>
  <option value="effectiveness">Effectiveness</option>
  <option value="efficiency">Efficiency</option>
</select>
<input type = "button" class = "btn"
name = "Switch Category" value = "View Different Performance Measure" id ='btn2'/>
</div>
</div>
<div class = "row">

<div class ="col-md-10 col-md-offset-1"><iframe id = "avg_improvement" width="100%" title="Improvement in Safety" height="425px" src="https://opendata.socrata.com/w/dtbn-94bu/y34g-bnf3?cur=2TviRIpjwyc&from=root" frameborder="5"scrolling="no"><a href="https://opendata.socrata.com/dataset/Improvement-in-Safety/dtbn-94bu" title="Improvement in Safety" target="_blank">Improvement in Safety</a></iframe></div>
</div>

 **<div class = "row" id="map" style="width:100%; height:100%;" >
   <script
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
        </div>**

<div class = "row center-image">
<div height = "10px" width = "100%" class = "center-image"></div>
</div>

</body>
</html>

但是，地图不会显示在页面上。奇怪的是，当我在一个只有地图而没有其他东西的示例页面上开发这个时，地图出现了。但是当我把代码移过来的时候，它就不会加载了。不知道为什么。控制台不会显示任何源中的错误，但地图不会显示。

使用某些绝对单位（例如px）设置地图div的高度。那就好了

<div class = "row" id="map" style="width:100%; height:300px;" >

是的，发布后我找到了这个，并尝试了一下。为什么它需要一个固定的高度和宽度？下面是一个很好的解释，你的地图div没有一个大小（100%是什么？）的副本

<div class = "row" id="map" style="width:100%; height:300px;" >