Is there a way to access the Geocoder?

[dgcoffman]

I need to center on an address, not a lat/long.

[jedwards1211]

google-map-react uses window.google.maps if it's already available; it only automatically loads it if it's not already present.
So you can load the Google Maps API yourself before the google-map-react bundle (via script tag in the header or whatever) and use the Geocoder in it. It's also possible to use the Geocoding Service via pure REST requests without loading any library.

[jedwards1211]

Let me know if this answers your question and I'll close it

[istarkov]

Closed as duplicate of this
#43

[ryanblakeley]

Just for clarification, is there not a way to do a reverse geocode lookup entirely with this package? Is that considered out of scope?

[AntoniusGolly]

@rojobuffalo In my opinion this is out of scope. Geocoding and drawing maps are two different things, not only in this react wrapper but also in the Google Maps Api. With the native api you can't draw a map for a given address directly. And this is for a good reason: not every address (query string) results in one Lat/Lon response. And it is up to your application how you deal with multiple results.

[itsmichaeldiego]

@rojobuffalo I don't think geocode lookup is scoped for this package really. We try to keep this package simple as well, and if you want to do something different you can always do it out of the box with the google maps api.

[Bernabe-Felix]

In case somebody needs it:

<GoogleMapReact
{...otherOptions}
 onGoogleApiLoaded={initGeocoder}
>
 <AnyReactComponent {...props} />
<GoogleMapReact>

initGeocoder = ({ maps }) => {
  const Geocoder = new maps.Geocoder();
};

[itsmichaeldiego]

@Bernabe-Felix Exactly what I was mentioning, thanks for sharing that! We can use anything from maps api using onGoogleApiLoaded

[andrewterra]

@Bernabe-Felix I wasn't able to get this to work in my code, it keeps saying that "InitGeocoder" is not defined.

[BernabeFelix]

did you try this.initGeocoder?

[itsmichaeldiego]

@terrabl Depending on your structure you might need to do:

const initGeocoder = ({ maps }) => {
  const Geocoder = new maps.Geocoder();
};

[kaycebasques]

FYI when I do something like:

const initGeocoder = ({ maps }) => {
  console.log(maps);
};

I get an error from Google saying that it's dangerous to use internal APIs.

[itsmichaeldiego]

@kaycebasques Because you need to add yesIWantToUseGoogleMapApiInternals, something like:

  <GoogleMapReact
    zoom={props.zoom}
    center={props.center}
    bootstrapURLKeys={{
      key: process.env.MAP_KEY,
      language: 'en',
    }}
    yesIWantToUseGoogleMapApiInternals
  >
    {props.children}
  </GoogleMapReact>

[kaycebasques]

Except I don't want to use API internals ;) Google is explicitly warning against it.

I think I got a solution working pretty easily with the Google Maps Node.js client.

...
import client from '@google/maps';

class Pickup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      client: client.createClient({key:"YOUR_KEY_HERE"})
    };
    this.state.client.geocode({ address: '1600 Amphitheatre Pkwy, Mountain View'},
      (error, response) => console.log(response.json.results));
  }
}
...

My code is probably terribly unidiomatic... I'm a React newbie... but you get the idea.

[ratonjuancarlos]

Hi!
I think I missed in some place.
How works this initGeocoder to use the addres in the child component that I want to render?
This is my code, if it clearify my point:

const stores: [
    {
      address: "Florida 533, caba, argentina",
      id: 1,
    },
    {
      address: "Maipu 233, caba, argentina",
      id: 2,
    }]

      <GoogleMapReact
          onGoogleApiLoaded={initGeocoder}
          yesIWantToUseGoogleMapApiInternals
        >
          /*
           * I want to render 2 or more *stores*
           */
          {
           stores.map(sucursal => 
              <MarkerComponent
                address={sucursal.address} // this is the data that I have
              />
            );
         }
        </GoogleMapReact>

I can render 2 or more stores if I use lat and lng, but I only have address.
How the onGoogleApiLoaded or the initGeocoder will help me?
Thanks!!!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.