This article is about fixing Uncaught ReferenceError: google is not defined in tomchentw react-google-maps
  • 27-Feb-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing Uncaught ReferenceError: google is not defined in tomchentw react-google-maps

Uncaught ReferenceError: google is not defined in tomchentw react-google-maps

Lightrun Team
Lightrun Team
27-Feb-2023

Explanation of the problem

When react-google-maps is initialized without internet access, an exception is thrown. The exception message displays the error message: “GET https://maps.googleapis.com/maps/api/js?key=&v=3.exp&libraries=geometry,drawing,places net::ERR_INTERNET_DISCONNECTED”. This error is triggered when a user tries to access a page that uses react-google-maps without an active internet connection.

The error occurs at line 39617 of the app.js file where the function create is called. This function is responsible for creating a new map using the Google Maps JavaScript API. The error message also suggests that a script tag needs to be added to the head element to load the Google Maps JavaScript API v3. The error message provides a link to the pull request for the “async/ScriptjsLoader” which can be used to load the API.

The error can be reproduced by using the GoogleMap component from the react-google-maps library. This component is wrapped in the withScriptjs and withGoogleMap higher-order components. The GoogleMap component takes props such as containerElement, mapElement, and loadingElement. The error can be triggered by rendering the GoogleMap component without an internet connection. When the network is disabled while working on the application, the error is displayed, but the application is not broken. The dependencies used in the project include react, react-dom, react-google-maps, and react-router-dom.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Uncaught ReferenceError: google is not defined in tomchentw react-google-maps

  1. Check the network connection: The error message suggests that the application is unable to connect to the Google Maps JavaScript API. Ensure that the network connection is stable and that the API key used in the application is valid and has the necessary permissions.
  2. Check the version of the Google Maps JavaScript API: The error message also indicates that the version of the API being used is v3.exp. Ensure that this version is compatible with the react-google-maps library being used in the application.
  3. Check the implementation of the react-google-maps library: The error message suggests that the google variable is not defined. Check the implementation of the react-google-maps library and ensure that it is correctly importing the Google Maps JavaScript API and initializing the google variable.
  4. Check for conflicts with other libraries: It is possible that there may be conflicts with other libraries used in the application. Check for any conflicts and ensure that the libraries are compatible with each other.
  5. Check the version of react-google-maps: Ensure that the version of the react-google-maps library being used is up-to-date and that there are no known issues or bugs that could be causing the error.

Other popular problems with tomchentw react-google-maps

Problem: “Uncaught ReferenceError: google is not defined”

This error occurs when the Google Maps API is not properly loaded or initialized. The error message indicates that the “google” object is not defined, meaning that the library is unable to access the Google Maps API.

Solution:

To resolve this issue, ensure that the Google Maps API is loaded before the react-google-maps library. This can be done by including the following script tag in the head of your HTML file, before any other scripts:

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

Replace “YOUR_API_KEY” with your actual API key. You should also verify that the API key is valid and has the appropriate permissions for the features you are using in your application.

Problem: “TypeError: Cannot read property ‘maps’ of undefined”

This error occurs when the “maps” property is not defined, indicating that the Google Maps API is not properly initialized. This can happen if the API is not loaded before the react-google-maps library, or if there are conflicts with other libraries that are also using the Google Maps API.

Solution:

Similar to the previous issue, make sure that the Google Maps API is loaded before the react-google-maps library. Additionally, check that there are no conflicting libraries or scripts that may be interfering with the Google Maps API. You can try removing other libraries temporarily to see if the issue resolves.

Problem: “InvalidValueError: setMap: not an instance of Map”

This error occurs when the component attempts to render a map, but the map object is not properly defined or instantiated. This can happen if the component is rendered before the Google Maps API is fully loaded and ready to use.

Solution:

Ensure that the Google Maps API is fully loaded before rendering the component. You can use the google.maps.event.addDomListener() method to listen for the “load” event on the window object and trigger the rendering of the component once the event is fired. Alternatively, you can use the withScriptjs Higher Order Component (HOC) provided by the react-google-maps library, which handles the loading and initialization of the Google Maps API automatically.

A brief introduction to tomchentw react-google-maps

Tomchentw react-google-maps is a library for React that provides a set of components to render Google Maps. This library allows developers to easily integrate Google Maps into their React applications by providing a set of React components that wrap the Google Maps JavaScript API. These components include Map, Marker, InfoWindow, and many others, allowing developers to create custom map-based applications.

Tomchentw react-google-maps offers a range of features and customizations that make it an attractive option for developers looking to integrate Google Maps into their React applications. The library allows for easy customization of map markers, including custom icons and animations. It also provides support for multiple map types, including street maps, satellite maps, and terrain maps. Additionally, the library offers support for various user interactions, such as mouse and touch events, making it easy for developers to create interactive and engaging map-based applications. Overall, tomchentw react-google-maps is a powerful library for React developers looking to add Google Maps functionality to their applications.

Most popular use cases for tomchentw react-google-maps

  1. Rendering interactive Google Maps: The library provides a React component called GoogleMapReact that allows developers to render a fully interactive Google Map in their React applications. The map can be zoomed in/out, panned, and rotated, and users can interact with it using their mouse or touch gestures on mobile devices.

Example Code Block:

import GoogleMapReact from 'google-map-react';

function Map() {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <GoogleMapReact
        defaultCenter={{ lat: 59.95, lng: 30.33 }}
        defaultZoom={11}
      />
    </div>
  );
}
  1. Adding markers and overlays: The library also provides several components for adding markers, overlays, and other elements to the Google Map. For example, developers can use the Marker component to place a custom marker on the map at a specific location, and the OverlayView component to add custom HTML content or a custom image overlay to the map.

Example Code Block:

import GoogleMapReact, { Marker } from 'google-map-react';

function MapWithMarker() {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <GoogleMapReact
        defaultCenter={{ lat: 59.95, lng: 30.33 }}
        defaultZoom={11}
      >
        <Marker
          lat={59.95}
          lng={30.33}
          text="My Marker"
        />
      </GoogleMapReact>
    </div>
  );
}
  1. Accessing the Google Maps API: Finally, the library allows developers to access the full power of the Google Maps API, including features like geocoding, directions, and places search. Developers can use the withGoogleMap higher-order component to wrap their Google Map component and gain access to the google object, which provides access to the full Google Maps API.

Example Code Block:

import { withGoogleMap, GoogleMap, DirectionsRenderer } from 'google-map-react';

const MapWithDirections = withGoogleMap(props => (
  <GoogleMap defaultZoom={7} defaultCenter={props.origin}>
    <DirectionsRenderer directions={props.directions} />
  </GoogleMap>
));

function Directions() {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <MapWithDirections
        origin={{ lat: 40.756795, lng: -73.954298 }}
        destination={{ lat: 41.756795, lng: -72.954298 }}
        containerElement={<div style={{ height: '100%' }} />}
        mapElement={<div style={{ height: '100%' }} />}
      />
    </div>
  );
}
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.