This app shows a map of San Francisco with markers denoting places a film is filmed at. This is how it works:

• When the app is loaded, it will display a map on the right and a search box on the left.
• When user selected a movie, left side will show a bunch of texts showing the information of the movie such as title, release year, production company, director, writer, actor1,2,3, and locations.
• If user type an invalid movie name, markers on the map will be removed and there will not be autocompletion.

This top level component controls the state of the whole application. It:

• load all the movies into a local state when a app is mounted
• find the currentMovie and positions which will be used by MovieInfo and MovieLocationMap component respectively.

props:

• currentMovie {Object}: a movie object with title, release_year, production_company, director, writer, actor_1,2,3 and locations

Props:

• positions (Array): an array of LatLngLiteral that are used to display markers on the map

According to this post, google map api key has to be public on web source code, so I've restricted my API key to be used by only this app's address.

This is a serverless web app hosted on Netlify.

• SF movie data are retrived from here with an ajax call
• Location names will be turned into latitude and longitude via Geocoding API (also done by ajax call)

• react-google-maps
• lodash
• bootstrap
• reactstrap
• superagent
• react-select

• Able to show where various movies are filmed.