'/src/components/EventFormSuperContainer.js' see the onSuggestSelect method (starts at line 115)
This method is fired when the user selects one of the autocomplete options provided by the Google Places Autosuggest service via the instance of a react geosuggest component.
When this method fires it provides certain Google Place information as an argument (most importantly a place_id).
With the place_id in hand it is easy to make an API call to get whatever other information you could want about that specific place (with the exception of a url or urls for photos of the place). The request takes the following form:
See screenshot below with the response logged to the console. Notice we don't immediately have access to a photo url. We have a photo_reference:
With the photo_reference (s), we can make a request like the following example (note: this example has extra parameters like image resizing):
https://maps.googleapis.com/maps/api/place/photomaxwidth=400 &photoreference=CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU &key=YOUR_API_KEY
Since, we are using React, it is preferable to just deal with the pure HTTP arm of the API as opposed to the Javascript Library (I prefer to deal with just a pure data source as opposed to mixing in another library into React). However, using the HTTP service, the request will return the actual photo (i.e. not an image url like we want).
I could design around it, I'm able to pull a lot of information about the location. I probably don't need an actual photo of the event location. Its purpose would most likely be to serve as a background of the upper portion of the event card . See below for example:
This relates to a more general problem I have of interacting with third party libraries using React. If I attempt to use the Javascript Library, I am not able to interact with the google service altogether. Even though the google object exists in the global scope (I can access it directly from the console when the app is running), I am not able to get to it from the component methods that I've discussed.
'/src/components/EventFormSuperContainer.js' see the
onSuggestSelect
method (starts at line 115)This method is fired when the user selects one of the autocomplete options provided by the Google Places Autosuggest service via the instance of a react geosuggest component.
When this method fires it provides certain Google Place information as an argument (most importantly a
place_id
).With the place_id in hand it is easy to make an API call to get whatever other information you could want about that specific place (with the exception of a url or urls for photos of the place). The request takes the following form:
See screenshot below with the response logged to the console. Notice we don't immediately have access to a photo url. We have a
photo_reference
:With the
photo_reference
(s), we can make a request like the following example (note: this example has extra parameters like image resizing):https://maps.googleapis.com/maps/api/place/photomaxwidth=400 &photoreference=CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU &key=YOUR_API_KEY
Since, we are using React, it is preferable to just deal with the pure HTTP arm of the API as opposed to the Javascript Library (I prefer to deal with just a pure data source as opposed to mixing in another library into React). However, using the HTTP service, the request will return the actual photo (i.e. not an image url like we want).
When I attempt to rewrite this piece of code with the Google Places Javascript Library (as opposed to the Google Places Web Service), I tend to run into issues.
I could design around it, I'm able to pull a lot of information about the location. I probably don't need an actual photo of the event location. Its purpose would most likely be to serve as a background of the upper portion of the event card . See below for example:![card_locationphoto-02](https://cloud.githubusercontent.com/assets/10340963/23807672/85347b52-0594-11e7-822a-be22f918f0b9.jpg)
This relates to a more general problem I have of interacting with third party libraries using React. If I attempt to use the Javascript Library, I am not able to interact with the google service altogether. Even though the
google
object exists in the global scope (I can access it directly from the console when the app is running), I am not able to get to it from the component methods that I've discussed.