CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Carson
Carson

Reputation: 1257

Uncaught ReferenceError: google is not defined

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",
      }
    }
  ]
}

Upvotes: 3

Views: 24059

Answers (3)

loveJS
loveJS

Reputation: 52

In fact, you can just write:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE"></script>

(without the callback). The API_KEY is also not necessary. In a public Maps JavaScript API app it is therefore strongly recommended to add a referrer restriction to any key used in a production system, especially public facing ones, and only authorize the domain, host or even full file URL of your app.

Upvotes: 0

omarjmh
omarjmh

Reputation: 13896

You are close, first off you need to add a listener using google.maps.event.addListerner(), then you need to add the listener to the DOM using google.maps.events.addDomListner()

addListener is async, so you need to write it with a callback. Here is an example:

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center: myCenter,
  zoom:5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
  position: myCenter,
  title:'Click to zoom'
  });

marker.setMap(map);

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Relevant Links:

http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_marker_click

https://developers.google.com/maps/documentation/javascript/reference#event

https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

Upvotes: 0

cl3m
cl3m

Reputation: 2801

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 !

Upvotes: 3

Related Questions