React Google Maps API (ReferenceError: google is not defined)

Question

I'm using react-google-maps/api node module. I need to set the value of zoomControlOptions is TOP_LEFT but I ended up getting this error Uncaught ReferenceError: google is not defined. Here is the link to the repo.

I'm getting the error here

const options = {
  zoomControl: true,
  mapTypeControl: false,
  minZoom: 2,
  streetViewControl: false,
  zoomControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT, // google is undefined here
  },
};

Please help me :)

Answer 1

Try defining google variable explicitly like this:

const google = window.google;

Also, you may read out this answer as well

Answer 2

This happens because you are rendering Google Map before it's loaded. Just try this syntax

Answer 3

Try to define "options" inside your component and add "window", like

position: window.google.maps.ControlPosition.TOP_LEFT

Also, you can put just a number

BOTTOM: 11
BOTTOM_CENTER: 11
BOTTOM_LEFT: 10
BOTTOM_RIGHT: 12
CENTER: 13
LEFT: 5
LEFT_BOTTOM: 6
LEFT_CENTER: 4
LEFT_TOP: 5
RIGHT: 7
RIGHT_BOTTOM: 9
RIGHT_CENTER: 8
RIGHT_TOP: 7
TOP: 2
TOP_CENTER: 2
TOP_LEFT: 1
TOP_RIGHT: 3

Answer 4

Loading maps and markers in React with googleapi

import React from 'react'

const loadScript = (src) =>
new Promise((resolve, reject) => {
  if (document.querySelector(`script[src="${src}"`)) return resolve()
  const script = document.createElement('script')
  script.src = src
  script.onload = () => resolve()
  script.onerror = (err) => reject(err)
  document.body.appendChild(script)
})

const MyMapComponent = ({center, zoom, marker}) => {
  const ref = React.useRef();
  const src=`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_KEY}&callback=initMap`
  
  loadScript(src)
    .then(() => {
      /*global google*/
      // console.log("Load script google: ", google)
    })
    .catch(console.error)
    React.useEffect(() => {
      const map = new window.google.maps.Map(ref.current, {
        center,
        zoom,
      });
        new google.maps.Marker({
          position: {  
             lat: -15.770,
             lng: -44.233
          },
          map,
          icon: "https://yourlovedIcon.png",            })
      ))
    });

  return <div ref={ref} id="map" style={{height: '100vh', width: '50vh'}}/>;
}

function Maps() {
 
  const center = { 
    lat: -15.770,
    lng: -44.233 };
  const zoom = 10
   
  return (
          <MyMapComponent 
          center={center}
          zoom={zoom}
          marker={center}
          />
)
}

export default Maps

If you want to use an customized API to get cordinates from internet:

import React from 'react'
import axios from 'axios';

const loadScript = (src) =>
new Promise((resolve, reject) => {
  if (document.querySelector(`script[src="${src}"`)) return resolve()
  const script = document.createElement('script')
  script.src = src
  script.onload = () => resolve()
  script.onerror = (err) => reject(err)
  document.body.appendChild(script)
})

const MyMapComponent = ({center, zoom, marker}) => {
  const ref = React.useRef();
  const src=`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_KEY}&callback=initMap`
  
  loadScript(src)
    .then(() => {
      /*global google*/
      // console.log("Load script google: ", google)
    })
    .catch(console.error)
    React.useEffect(() => {
      const map = new window.google.maps.Map(ref.current, {
        center,
        zoom,
      });
      marker.features.map(selectedData => (
        new google.maps.Marker({
          position: {  
            lat: selectedData.coordinates[0],
            lng: selectedData.coordinates[1]
          },
          map,
          icon: "https://yourlovedIcon.png",
        })
      ))
    });

  return <div ref={ref} id="map" style={{height: '100vh', width: '50vh'}}/>;
}

function Maps() {
  const [data, setData] = React.useState('');

  React.useEffect(() => {
    async function fetchData() {
      const response = await axios.get("https:\\YOURAPI.LOAD")
      setData(response.data)
    }
    fetchData();
  },[])
  
  const center = { 
    lat: -15.770,
    lng: -44.233 };
  const zoom = 10
    
  return data && 
          <MyMapComponent 
          center={center}
          zoom={zoom}
          marker={data}
          />
}

export default Maps

Answer 5

You can try doing this. Especially with next.js

zoomControlOptions: {
   position:
     typeof google !== "undefined"
     ? google.maps.ControlPosition.TOP_RIGHT
     : null,
}