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

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

<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.

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

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>
  );
}

2. 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>
  );
}

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>
  );
}