Home/ Questions/The easy way to handle error - uncaught referenceerror: google is not defined
Next
Answered
Nathan Gagnon
  • 30
Asked: 2022-05-18T18:11:01+00:00 In:

The easy way to handle error – uncaught referenceerror: google is not defined

  • 30

. Advertisement .

..3..

. Advertisement .

..4..

I encountered the following problem in completing my work:

Uncaught ReferenceError: google is not defined

Below is the code I ran:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
 <script>
 var directionsDisplay;
 var directionsService = new google.maps.DirectionsService();
 var map;
 function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);
 }
 $(document).ready(function(e) { initialize() });
 </script>
 <div id="map_canvas" style="height: 354px; width:713px;"></div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 </head>
 <body>
 <script>
 $(document).ready(function(e) {
  $('button').click(function(){
  $.ajax({
  type: 'GET', url: 'map-display',
  success: function(d) { $('#a').html(d); }
  })
  });
 });
 </script>
 <button>Call</button>
 <div id="a"></div>
 </body>
 </html>

What’s causing it, and how can it be resolved in the “uncaught referenceerror: google is not defined“ in the programs?

google is not defined
Share

2 Answers

  1. Best Answer
    Expert

    The cause:

    This error occurs because by default, the API cannot be loaded after the document has completely loaded.

    Solution:

    It must be loaded asynchronously.

    Let’s change the map page as needed to solve your problem:

    <div id="map_canvas" style="height: 354px; width:713px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script>
var directionsDisplay,
directionsService,
map;

function initialize() {
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}

</script>
    • 0

  2. Although this answer doesn’t directly relate to the question’s issue, in some cases the “Uncaught ReferenceError Google is Not Defined” error will occur if the google maps API you’re using is calling your js file before it…so DO NOT do this. 

    <script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    • 7

Leave an answer

You must login to add an answer.

Need An Account,