/Interactive-Map-with-News-Headlines

A mashup of Google Maps and Google News where news is filtered by observable locations.

Primary LanguageJavaScript

Interactive Map with News Headlines

One of the two large projects I did for Harvard's CS50 online course. The project uses Python, HTML, CSS, JavaScript, and SQL. I used Flask's built-in web server to host the website.

I had to implement a website that lets users search for articles atop a map. It is a mashup that combines data from Google News with functionality from Google Maps.

Some of the things I had to:

  • Create a database of all the cities I wanted to show up on the map.

  • Make it so the user could search for a location and the search box would autocomplete the user's inquiry.

  • Add markers to the map that when clicked would show a number of articles specific to that location from Google News.

  • Remove markers if the area is not visible on the map.