Menu
I'm trying to to load in markers from a geoJSON file onto my map, the map loads fine, but keep getting an error...
Uncaught ReferenceError: google is not defined
at this line...
google.maps.event.addDomListener(window, 'load', initialize);
I've read a few 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.
HTML/JS Code
<!DOCTYPE html>
<html>
<head>
<title>Game Industry Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel=StyleSheet href="css/style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="navbar navbar-defualt navbar-fixed-top">
<a class="navbar-brand" href="#">Game Industry Map</a>
<div class="input-group">
<input type="text" class="form-control" placeholder="From Software, Naughty Dog, Bethesda Game Studios, BreakAway Games..." id="query" name="query" value="">
<div class="input-group-btn">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
<div class='content-container'>
<div id="map"></div>
<div id="company-info">
<!--To do...-->
</div>
</div>
<script type="text/javascript">
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);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
type="text/javascript"></script>
</body>
<footer>Created by <a href="#">My Name</a>.</footer>
</html>
geoJSON File
{ "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",
}
}
]
}
976
Try to include the google library before the script calling the library:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
type="text/javascript"></script>
<script type="text/javascript">
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);
</script>
Edit
You are defining a callback here : /maps/api/js?key=API_KEY_HERE&callback=initMap
This will call your initMap() method once google maps has loaded all its components.
But you are calling the google.maps.event.addDomListener(window, 'load', initialize); outside this function, hence, when google isnot yet loaded.
You should try to include your addDomListener call in your initMap() call !
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
