Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[feat] Add InfoWindow and Modal Appearance on Markers #30

Merged
merged 4 commits into from
Oct 26, 2024
Merged

[feat] Add InfoWindow and Modal Appearance on Markers #30

merged 4 commits into from
Oct 26, 2024

Conversation

ethan-tam33
Copy link
Collaborator

What's new in this PR

Description

  • Needed to switch to @vis.gl/react-google-maps instead of @react-google-maps-api to use AdvancedMarker, which allows for InfoWindow
  • Created a Map ID which is needed for @vis.gl/react-google-maps
  • InfoWindow renders upon hovering over AdvancedMarker
  • ProjectModal renders upon clicking AdvancedMarker

Screenshots

Screenshot 2024-10-21 at 4 44 16 AM Screenshot 2024-10-21 at 4 44 41 AM

How to review

  • api/maps/AddMarkers.tsx
  • api/maps/MarkerInfoWindow.tsx
  • components/Map/map.tsx

Next steps

Relevant links

Online sources

https://visgl.github.io/react-google-maps/

Related PRs

CC: @itsliterallymonique

@ethan-tam33 ethan-tam33 linked an issue Oct 21, 2024 that may be closed by this pull request
[feat] Create Project Info Window and Open Project Modal when user clicks Marker #17
Closed
itsliterallymonique
itsliterallymonique requested changes Oct 22, 2024
View reviewed changes
Copy link
Collaborator

@itsliterallymonique itsliterallymonique left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you make it so that the infowindows are not cut off if the marker is at the edge of the map? Can you also remove the x button since we are not using that.

@ethan-tam33
Copy link
Collaborator Author

@itsliterallymonique I just enabled auto pan for the map. Is this what you mean?

jjstnlee
jjstnlee approved these changes Oct 25, 2024
View reviewed changes
Copy link
Collaborator

@jjstnlee jjstnlee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! How come you removed the close button from the project modal though.

@ethan-tam33 ethan-tam33 force-pushed the 17-feat-create-project-info-window-and-open-project-modal-when-user-clicks-marker branch from cc1a28b to 57157e0 Compare October 26, 2024 06:28
@ethan-tam33 ethan-tam33 merged commit 221d6ec into main Oct 26, 2024
2 checks passed
@ethan-tam33 ethan-tam33 deleted the 17-feat-create-project-info-window-and-open-project-modal-when-user-clicks-marker branch October 26, 2024 06:31
@itsliterallymonique itsliterallymonique mentioned this pull request Oct 28, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@itsliterallymonique itsliterallymonique itsliterallymonique approved these changes

@jjstnlee jjstnlee jjstnlee approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[feat] Create Project Info Window and Open Project Modal when user clicks Marker
3 participants
@ethan-tam33 @itsliterallymonique @jjstnlee