Google Map: Uncaught ReferenceError: google is not defined

Question

I'm working on a google map script which is throwing up this error. The issue is in this line:

var map = new google.maps.Map(document.getElementById('google-map'), {

Corresponding HTML snippet is:

<!-- Google Maps --> <div id="google-map"></div>

I've seen few questions which propose solutions to this problem but I havent really understood most of them: asynchronously loading the script or having a developer API key.
I'm just looking for a solution to what the issue really is and preferably a logical explanation to what the problem is.

Edit 1: The link the API is missing. I have added that and the error has gone but still the map doesnt show up. ( Please note that I've used PHP to divide the code into segments. )

Ashley · Accepted Answer · 2015-12-12 23:44:12Z

2

I can't see that you've linked it to Google Maps api anywhere?

You need to link this script for google to be defined:

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

answered Dec 12, 2015 at 23:44

Ashley

466 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user248884 Over a year ago

Thanks for pointing that out! I have added the link but still its not showing up. Any ideas?

Community · Accepted Answer · 2017-05-23 11:52:23Z

I ran your script, and it seems like the following error is very common.

Uncaught TypeError: Cannot read property 'offsetWidth' of null

I found this question: Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null with answers suggesting that the error is because of not rendering the map div before the js script runs.

Try:

<script> /* Your location */ function initialize () { var locations = [ ['IIIT Hyderabad, Gachibowli, Hyderabad <span>Head Office</span>', 17.444792, 78.348310, 1] ]; /* Map initialize */ var mapCanvas = document.getElementById('google-map'); var mapOptions = { zoom: 10, center: new google.maps.LatLng(17.444792, 78.348310), panControl: false, zoomControl: true, scaleControl: false, mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script>

This only calls the script after the page has loaded. I ran it and it works for me.

Collectives™ on Stack Overflow

Google Map: Uncaught ReferenceError: google is not defined

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related