Check the project website online:

Click here to view project online

Plan Of Action

Step 1

• Create Wireframe DONE

• Set Up the bass HTML structure DONE

• Import Google Maps into the window DONE

• Add the text Store locator DONE

• Add input box DONE

• Add Store List Container DONE

• Add a marker to the map DONE

• Style Address and phone number DONE

• Duplicate to have 3 address containers DONE

Step 2

• Style the individaul store item in the stores list DONE

• Show all the store in the stores list based on real world data DONE

• Show the marker based on real world store data DONE

• Show the info Window when you click on the individual store DONE

• Add a beautiful transtition on the hover of the individual store DONE

• Change the style of the marker on the map(GET CREATIVE)

• Style your Google Map. You can use this for reference: https://developers.google.com/maps/documentation/javascript/styling

• BONUS Link the address in the info window to Google Maps. Link for reference: https://developers.google.com/maps/documentation/urls/guide

starbucks store locator, devtools network XHR location, preview, Store as a global variable, copy(temp1)

Step 3

• Complete the styling for the marker info window DONE

• Open the info window for marker when you select a store in store's list DONE

• Allow a user to search for the stores in a zip code (first three characters like "00-" or whole zip code) DONE

• Add a beautiful transition on the hover of an individual store DONE

Google Maps API Key

Go to google cloud platform apply a new one.

FontAwesome Link with a lot of icons

https://kit.fontawesome.com/c939d0e917.js