TL;DR To style a search box like the one on Google.com, write the HTML and CSS code as in this CodePen demo that I’ve made. Then you’ll have a user experience shown in the GIF animation below: Intro I’m making a web app that improves the user experience of Google Maps. Its…

TL;DR Use aria-label to give accessible names to icon buttons. Browsers may fail to recognize an icon image's own accessible name as its parent <button> element's accessible name. Introduction My Ideal Map App, a web app I’m building, has four icon buttons on its main screen:

TL;DR Unlike Google Maps native app, a web app cannot show the direction at which the user’s device points at on the map embedded in a page. A work around is to calculate the direction of the user’s movement from the current and previous location, by using trigonometry along with React’s…

TL;DR To keep updating the user’s location shown on embedded Google Maps for a web app: Once the user presses a button, run Geolocation API’s getUserPosition() to snap the map to where the user initially is Then run the API’s watchPosition() method to start tracking the user's location without snapping the…

TL;DR Sometimes it takes a while for web apps to show the result after the user taps a button. …

TL;DR To create a web app that shows the user’s location on embedded Google Maps with React: Create a state variable that stores an instance of Google Maps, and pass this state to a button component as its prop (Section 1). Once the button is clicked, use Geolocation API to retrieve…

TL;DR With a web app, the user will be asked for granting permission to use their location information every time they access the app. Consequently, showing the user’s current location immediately after accessing the web app will force the user to give permission every time they start using the app. …

TL;DR If the web app’s UI depends on the user’s local time, make sure that static site generators such as Next.js will produce HTML pages only on the client-side. For example, if a React app’s UI turns into the dark mode automatically after 6pm at the user’s local time, use the…