google map react, from onGoogleApiLoaded apiIsLoaded doesn't called

Question

Function apiIsLoaded doesn't get called, and map can't be initialized. What's wrong? When inspecting, I can see a div without a google map iframe, just empty space. I need to apiIsLoaded be called, but cant find any way to do this. Here is the code, any help would be appreciated.

import React from 'react';
import GoogleMapReact from "google-map-react";

const LocationMap = (props) => {
    const apiIsLoaded = (map, maps) => {
        if (map) {
            map.setOptions({ gestureHandling: 'greedy', mapTypeControl: false, minZoom: 2});
        }
    };
    const { address } = props;
    const center = address ? { lat: address.lat, lng: address.lon } : { lat: 0, lng: 0 };
    return (
        <div className="google-maps-wrapper">
            <GoogleMapReact
                bootstrapURLKeys={{
                    key: process.env.REACT_APP_MAP_KEY
                }}
                defaultZoom={address ? 8 : 2}
                center={[center.lat, center.lng]}
                defaultCenter={[0, 0]}
                yesIWantToUseGoogleMapApiInternals={true}
                onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)}>
            </GoogleMapReact>
        </div>
    );
};

export default LocationMap;

I am having the same problem. When I use the package inside a CreateReactApp, it works fine. But when I try and use the package in my own app (which does not use CreateReactApp), it does not go into `onGoogleApiLoaded`. Maybe it is some Babel config. There are no console errors. — Alan P., Jun 18 '21 at 18:19
For me the problem was setting the initial `lat` and `lng` to null. So maybe that is what `address.lat` and `address.lng` are being set to. — Alan P., Jun 18 '21 at 19:37

score 0 · Answer 1 · answered Jan 20 '20 at 11:05

0

check your method is calld by GoogleMapReact or not

const apiIsLoaded = (map, maps) => {
      console.log('apiIsLoaded')
        if (map) {
            map.setOptions({ gestureHandling: 'greedy', mapTypeControl: false, minZoom: 2});
        }
    };

Second thing is you don't need to pass yes to

yesIWantToUseGoogleMapApiInternals={true}

change it to

 yesIWantToUseGoogleMapApiInternals

answered Jan 20 '20 at 11:05

Prakash Karena

2,525
1
7
16

1

let me know you are getting apiIsLoaded called or not or you can refer this https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Main.js#L69 example – Prakash Karena Jan 20 '20 at 11:06
I have already checked, apiIsLoaded isn't called, and it's my main problem. – Amalia Jan 20 '20 at 12:54
1

try this example https://codepen.io/maxrodkin/pen/WMyjXo.it might be problem with functional component refer this example which is class based so, first refer an example and try to convert it as classbased component might solve your problem – Prakash Karena Jan 20 '20 at 13:44
1

let's check step by step.first check your callback function works or not.like onGoogleApiLoaded={({ map, maps }) => console.log('It works')}> .please check and let me know what happen – Prakash Karena Jan 21 '20 at 04:40
1

https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Main.js#L69 – Prakash Karena Jan 21 '20 at 04:41

google map react, from onGoogleApiLoaded apiIsLoaded doesn't called

1 Answers1