Comments (16)
In case somebody needs it:
<GoogleMapReact
{...otherOptions}
onGoogleApiLoaded={initGeocoder}
>
<AnyReactComponent {...props} />
<GoogleMapReact>
initGeocoder = ({ maps }) => {
const Geocoder = new maps.Geocoder();
};
from google-map-react.
@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.
from google-map-react.
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.
from google-map-react.
@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.
from google-map-react.
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.
from google-map-react.
Let me know if this answers your question and I'll close it
from google-map-react.
Closed as duplicate of this
#43
from google-map-react.
Just for clarification, is there not a way to do a reverse geocode lookup entirely with this package? Is that considered out of scope?
from google-map-react.
@Bernabe-Felix Exactly what I was mentioning, thanks for sharing that! We can use anything from maps api using onGoogleApiLoaded
from google-map-react.
@Bernabe-Felix I wasn't able to get this to work in my code, it keeps saying that "InitGeocoder" is not defined.
from google-map-react.
did you try this.initGeocoder
?
from google-map-react.
@terrabl Depending on your structure you might need to do:
const initGeocoder = ({ maps }) => {
const Geocoder = new maps.Geocoder();
};
from google-map-react.
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.
from google-map-react.
@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>
from google-map-react.
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!!!
from google-map-react.
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.
from google-map-react.
Related Issues (20)
- shortest distance from a polygon to some point on map
- map.getProjection(...).fromContainerPixelToLatLng is not a function HOT 2
- Google map suddenly stopped loading, white screen appears. HOT 1
- Map Pins are not positioned correctly after zoom or pan HOT 12
- Fitbounds and directionService is not updating markers on the map HOT 1
- Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'm.nB')
- Card with address on upper left corner
- drag the map when we hover on div card outside the map and it show the that particular marker if marker is hide on centre coardinates HOT 1
- Google together with Visgl and OpenJS has released the official react components for Google maps HOT 4
- need to detect getVisible StreetViewService
- BBC – account overview
- User:Meta-Horizon - Meta
- AdvancedMarkerElement HOT 1
- About Open Source Summit | LF Events
- Microsoft Power BI Data Analyst
- Main Page - Meta
- Check out "TikTok"
- #
- Creating a map marker with visgl library
- React.StrictMode throws warning because of findDOMNode use
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from google-map-react.