undefinierte Variable in GoogleMap JSX Komponente

Question

In meiner Anwendung, ich den folgenden Code-Schnipsel aus dem Anfang meiner Google Map JSX Komponente haben (die von jemand anderem geschrieben wurde):

import React from 'react'; 
import { Button } from 'react-bootstrap'; 
import {GoogleMapLoader, GoogleMap, Marker, InfoWindow, DirectionsRenderer} from 'react-google-maps'; 
import { 
    default as canUseDOM, 
} from "can-use-dom"; 
const DirectionsService = new google.maps.DirectionsService(); 

Wenn ich nutzen Client-Seite Rendering und führen Sie diesen Code auf dem Client, es läuft ohne Fehler mit dem erwarteten Verhalten. Allerdings, wenn ich auf serverseitige Rendering mit ReactDOM.renderToString() wechseln, begegne ich folgende Fehlermeldung:

var DirectionsService = new google.maps.DirectionsService(); 
          ^
ReferenceError: google is not defined 

auf den Code der Suche im Detail. Die Variable "google" ist in meinem Code wirklich nirgends zuvor definiert.

Meine Fragen sind:

1. Wo wird die Variable "google" definiert?
2. Warum das clientseitige Rendering funktioniert, während serverseitige Fehler ausgegeben werden?

Vielen Dank für die Erklärung.

Answer 1

Die Variable google kommt von https://maps.googleapis.com/maps/api/js, die loaded asynchron auf dem Client ist.

Auf dem Server ist dieses Skript nicht geladen und die Dinge brechen. Es scheint, dass die component you are using nicht vollständig isomorph ist, so dass es nur auf der Client-Seite funktioniert.

Ich habe google-map-react in der Vergangenheit verwendet, sehr zu empfehlen und völlig isomorph.