Next JS and Google Maps API : Location-Based Ride Requests

Enable the Google Maps JavaScript API for a Next.js app by creating a project, securing an API key with IP restriction, and enabling the Maps JavaScript API for integration.

Install and integrate the Google Maps API into a Next.js app, create the request route with a map, secure the API key via .env.local, and center the map on London.

Clean up a functional Next.js Google Maps integration by removing unused state and onload/onunmount logic, then create and apply a custom map ID and style to reduce clutter.

Explore the map interface by toggling map type and zoom controls, disabling full screen and Street View, turning off clickable icons, and ensuring scroll wheel zoom remains active.

Learn to add markers to a Google Maps API map in a React app by importing the marker component, setting a lat-lng position, and rendering the marker on the map.

Learn to use custom map markers in a Next.js app by adding a PNG icon to public/assets, configuring a pin icon at 50x50, and applying it to Google Maps markers.

Discover marker options in the Next JS Google Maps API course, including visibility via the visible property, cursor customization, labeling with font and tailwind styling, draggable markers, and marker events.

discover how marker events in the Google Maps API work, including on click and drag end, using the event object to access latitude and longitude and log final coordinates.

Implement an info window for map markers with the React Google Maps API, manage its open state via useState, and craft a responsive card featuring image, title, subtitle, and description.

Explore building a Next.js map-based ride request page by converting to a server-side page with a client map component, creating a request page component, and updating header links for London.

Build a two-panel Next.js interface with a left-side origin–destination trip form and a right-side map, using Google Maps Places and Directions APIs to display trip details.

Enable the Google Places API in the Google Cloud Console, then load the script in the Next.js root layout, insert your API key with environment variables, and verify it works.

Store geocode data from Google places search results in a Next.js app, then render a map marker using latitude and longitude stored in component state.

Center the map on the user’s origin by panning to a new position using a map ref and onload, and apply LatLngBounds to restrict the place search to London.

Duplicate the origin search as destination, render the destination input after origin selection, and use the directions and routes APIs to render driving routes on the map.

Render a route on the map by importing the directions renderer, extracting directions data from the directions API result, and styling the polyline with red stroke color and weight options.

Explore setting up a Supabase project to power a location-based ride feature, creating a database with authentication, storage, edge functions, and real-time capabilities.

Create a Supabase client in your Next.js project, configure project URL and anon key via environment variables, test with a component, and centralize the client in a lib/supabase.js for reuse.

Learn to create and populate a Supabase test table with id, created_at, name, and distance, disable row level security, then fetch and render driver data in Next.js using useEffect.

Fetch data from the server using a server-side component and an async get drivers function, map through drivers, and improve error handling with a try-catch, as demonstrated with Supabase.

Enable the PostGIS extension, create a requests table with origin and destination geography points, set a uuid primary key, and apply a spatial index for efficient geo queries.

Finalizes the trip request form by submitting origin and destination to the requests table, using async data insertion with longitude first and latitude second, plus form validation.

Build the request detail page in next.js by submitting a ride request form and navigating to /request/[id] using the returned ID, with Supabase insertion.

Builds a full-screen map on the request detail page with a structured detail component setup and fetches a single request from Supabase using the URL id in Next.js.

Forward the single request data to the detail map component, set an effect to log it, and convert encoded coordinates to readable latitude and longitude to display markers.

Add origin and destination markers on the map by parsing a combined string with regex, converting values with parseFloat, and rendering the route with directions.

Create the drivers table and add drivers to support location-based ride requests by storing driver username, rating, and a point-based driver position, then populate data in Supabase.

Fetch data from the drivers table, convert driver position into coordinates, and display drivers as car markers on the map, preparing for distance-based filtering in the next lesson.

Learn to filter drivers by distance from a ride request by building a get nearby drivers function with a radius, fetched via rpc and wired into the user interface.

Add a radius input and search button to filter nearby drivers on the detail map, wire an API call and state to render markers and show driver counts.

Implement info windows for driver markers, track clicked marker with state, render driver username and rating with a star rating component, and close the window when the map is clicked.

learn to render a blue route on the map between the clicked driver marker and the request origin by capturing marker coordinates, decoding polylines, and rendering a Google Maps polyline.

Deploy your Next.js and Google Maps API app to vercel by connecting github, initializing git, and committing changes; configure environment variables, deploy, and verify the live site.

Acquire a domain with Namecheap, link it to a Vercel project, configure DNS and SSL, then update the Google Maps API key for websites and test a live ride map.