Injecting 3rd Party Libraries

'/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:

https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=YOUR_API_KEY

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:

place_details_response

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

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.

CKschneid / redux_meetup_planner