Google Map won't appear on page load

Question

I am trying to load a google map with some markers on it.

the html is the following The div where the map is supposed to be is at the bottom in bold:

<!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>

The javascript that generates the markers is the following the file in called 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);
    }
});
}

However the map won't appear on the page. Oddly when I was developing this on a sample page that had only the map and nothing else, the map appears. But the second I moved the code over, it won't load. No idea why. The console shows no errors in any of the sources, but the map won't show.

duplicate of [google maps height 100% of div parent](http://stackoverflow.com/questions/32928684/google-maps-height-100-of-div-parent) — geocodezip, Feb 15 '16 at 01:17

score 0 · Accepted Answer · answered Feb 15 '16 at 00:10

0

Set height of map div with some absolute unit (e.g. px). Then works fine

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

answered Feb 15 '16 at 00:10

Bart

1,268
2
12
14

Yeah after posting I found this and tried it out. Why does it need a fixed height and width? – user2907249 Feb 15 '16 at 00:24
Here is a good explanation [http://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div/31728799#31728799](http://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div/31728799#31728799) – Bart Feb 15 '16 at 00:29

Google Map won't appear on page load

1 Answers1