1. Display destination image in all the different types of Destination Cards we have.
When adding a destination to our database, the server calls to Google Place Details API for retrieving the list of photo_references for this place id. The reason we're not doing that on frontend is due to some issue I've encountered with directly using the Place Details API from client side (it seems like google wants any request from js client to go through their js library which doesn't provide access to individual photo_reference strings unfortunately.) So, the server side does the fetching of photo_references and saves the list with rest of destination information.
Next, from the client side TrecipePage DCs, Map DCs, and DestInfoWindow, we want to display image corresponding to the first photo_reference in the dest's photo_reference list. This is done by another call to our server. By calling on the /photos endpoint with the photo_reference in params, it can make the server do another call to Google Place Photo API to retrieve image data by this photo_reference. The server then pipes that image data to client side for display.
2. Bug fix: In Map page, clicking on edit icon of DC opens up a destination page.
This is fixed by inserting event.preventDefault() to stop the parent container from responding to click events when it is the edit button that's being clicked.
3. Add numbers to markers in static map showing near by destinations.
I realized that the map doesn't really tell a lot without those numberings... so I refactored the StaticMap class a little to get Marker objects directly as props, and build that in to request params. One implication for this change is that because each marker has unique number label, we can no longer group them under the same color in our request. Not sure if this is significant but let me know if it is LOL @knox153
1. Display destination image in all the different types of Destination Cards we have.
When adding a destination to our database, the server calls to Google Place Details API for retrieving the list of photo_references for this place id. The reason we're not doing that on frontend is due to some issue I've encountered with directly using the Place Details API from client side (it seems like google wants any request from js client to go through their js library which doesn't provide access to individual photo_reference strings unfortunately.) So, the server side does the fetching of photo_references and saves the list with rest of destination information.
Next, from the client side TrecipePage DCs, Map DCs, and DestInfoWindow, we want to display image corresponding to the first photo_reference in the dest's photo_reference list. This is done by another call to our server. By calling on the
/photosendpoint with the photo_reference in params, it can make the server do another call to Google Place Photo API to retrieve image data by this photo_reference. The server then pipes that image data to client side for display.2. Bug fix: In Map page, clicking on edit icon of DC opens up a destination page.
This is fixed by inserting
event.preventDefault()to stop the parent container from responding to click events when it is the edit button that's being clicked.3. Add numbers to markers in static map showing near by destinations.
I realized that the map doesn't really tell a lot without those numberings... so I refactored the StaticMap class a little to get Marker objects directly as props, and build that in to request params. One implication for this change is that because each marker has unique number label, we can no longer group them under the same color in our request. Not sure if this is significant but let me know if it is LOL @knox153
Closes #84