我正在尝试加载带有一些标记的谷歌地图。
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>
生成标记的javascript是以下名为VA_map.js的文件：
function initMap() {
//var state_filter = $('#state_select').val()
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.8524, -93.80046)
});
var state_filter = 'New York';
$.ajax({
type: 'GET',
url: 'https://opendata.socrata.com/resource/29sw-6mq4.json?state_name='+ state_filter,
success: function(data) {$.each(data, function(i, item) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.location_1.latitude, item.location_1.longitude),
map: map
});
});
console.log(data);
}
});
}
然而，地图不会出现在页面上。奇怪的是，当我在一个只有地图而没有其他内容的样本页面上进行开发时，会显示地图。但第二个我移动代码，它不会加载。不知道为什么。控制台在任何来源中都没有显示任何错误，但地图不会显示。
答案 0 :(得分：0)
使用某个绝对单位（例如px）设置地图div的高度。然后工作正常
<div class = "row" id="map" style="width:100%; height:300px;" >