Address Geocoding & Map Display

I need help integrating the Google Maps JavaScript API so that my web app can take any address a user enters, geocode it on the fly, and place a marker on an interactive map. The flow is straightforward: a visitor types an address, your code calls the Geocoding service, retrieves the precise latitude-longitude, and immediately renders that point on the map canvas embedded in the page.

Core expectations
• Clean, well-commented code that hits the Geocoding endpoint and gracefully handles errors or ambiguous results.
• Automatic marker placement with the usual map controls (zoom, pan) fully functional.
• A lightweight UI cue showing the formatted address returned by Google so the user can confirm accuracy.

Tech preferences
JavaScript ES6, the official Google Maps JS SDK, and vanilla HTML/CSS are ideal, but I’m open to React or Vue if you already have boilerplate that speeds things up.

Acceptance criteria
1. Entering “1600 Amphitheatre Parkway, Mountain View, CA” centers the map on that location and drops a marker without page reload.
2. Invalid or partial addresses trigger a friendly “address not found” notice instead of a blank map.
3. All API keys and billing-related items are kept in a separate config file so I can swap in my own credentials before deployment.

Deliver the working demo and source files, and I’ll plug in my key and push it live. Looking forward to seeing this map come alive.