title: Uncaught ReferenceError: google is not defined
body: <p>I'm trying to to load in markers from a geoJSON file onto my map, the map loads fine, but keep getting an error...</p>
  
  <pre><code>Uncaught ReferenceError: google is not defined
  </code></pre>
  
  <p>at this line...</p>
  
  <pre><code>google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>I've read <a href="https://stackoverflow.com/questions/33174540/uncaught-referenceerror-google-is-not-defined">a few</a> other questions on this, and most of it deal with how you need to include the google maps script before your map code. I've tried including it in my head and right above my map container, but no luck. The map itself actually does load, just the markers from my JSON file don't.</p>
  
  <p>HTML/JS Code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Game Industry Map&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"&gt;
      &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;link rel=StyleSheet href="css/style.css" type="text/css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="navbar navbar-defualt navbar-fixed-top"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Game Industry Map&lt;/a&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" class="form-control" placeholder="From Software, Naughty Dog, Bethesda Game Studios, BreakAway Games..." id="query" name="query" value=""&gt;
          &lt;div class="input-group-btn"&gt;
              &lt;button type="submit" class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='content-container'&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;div id="company-info"&gt;
          &lt;!--To do...--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      var map;
      function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: 34.029602, lng: -118.452416},
              zoom: 13
          });
          map.data.loadGeoJson('data.json');
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&amp;callback=initMap"
          type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;footer&gt;Created by &lt;a href="#"&gt;My Name&lt;/a&gt;.&lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>geoJSON File</p>
  
  <pre><code>{ "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [34.019602, -118.452416]},
        "properties": {
          "company-logo": "images/activision.png",
          "company-name": "Activision Publishing Inc",
        }
      },
  
      { "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [34.028230, -118.471270]},
        "properties": {
          "company-logo": "images/naughtydog.png",
          "company-name": "Naughty Dog Inc",
        }
      }
    ]
  }
  </code></pre>