A neighborhood map pointing out places of interest in lower Manhattan.
This is the final project for Udacity's Front-End Nanodegree (FEND) Program. (This is as of August 2018. It seems Udacity has changed the curriculum
for the FEND course. It is now only 5 projects with the React projects being a part
of their own course.)
I have not set up billing with Google so the map displays a "For development purposes only" watermark. This does not impair map functionality.
This is the final project for Udacity's Front-End Nanodegree (FEND) Program. (This is as of August 2018. It seems Udacity has changed the curriculum for the FEND course. It is now only 5 projects with the React projects being a part of their own course.)
The project was built using create-react-app.
I used a few different resources for research and inspiration. First, this great walkthrough by Edoh Kodjo on how to use the npm package Goolge-Maps-React for integrating the Google Maps API with React. Also, a lot of research using the Google Maps Javascript API Documentation.
Dependencies include:
Download this repo and install dependencies npm i
You will need to provide your own Foursquare and Google Maps API keys.
Then start a web server with npm npm start
Then open your browser to http://localhost:3000
The map auto-populates 30 locations from the Foursquare API in lower Manhattan. You can filter those locations by typing in the input field. If you click on either the marker or the name in the list you will see additional information about the location in a info window.
If you have something to add or change with the code, please submit a Pull Request and it will be reviewed.