Germán Álvarez

Creating a routing app with Google Maps API from scratch

One missing CSS rule can make your map disappear. Learn this and other critical tips for building a complete routing app with the Google Maps API.

Creating a routing app with Google Maps API from scratch
#1about 2 minutes

Overview of the three map applications to be built

A brief introduction to the three projects that will be created from scratch: a styled map, a geolocated map, and a route-planning application.

#2about 5 minutes

Setting up the basic HTML and script structure

Learn how to structure the HTML file, include the Google Maps API script with a key and callback function, and prepare the initial JavaScript setup.

#3about 9 minutes

Rendering a basic map with a marker and custom styles

Instantiate a basic map with a specific center and zoom level, add a marker to a location, and apply custom JSON styles for unique visual themes.

#4about 11 minutes

Using browser geolocation to center the map on the user

Access the user's location using the browser's `navigator.geolocation` API and dynamically update the map's center and add a marker to their current position.

#5about 22 minutes

Creating a complete route planning application

Build a routing feature by capturing user input for a destination, using geolocation for the origin, and leveraging the Directions Service and Directions Renderer to calculate and display the route on the map.

#6about 7 minutes

Q&A on API billing, local development, and best practices

A discussion covering the Google Maps API free tier, how usage is counted during local development, and important best practices like managing API keys in production.

Related jobs
Jobs that call for the skills explored in this talk.

job ad

Saby Company

Saby Company
Delebio, Italy

Remote
Intermediate
Node.js

Matching moments

The technical journey of building the climate map
03:29 MIN

The technical journey of building the climate map

From Code to Cause: Building a Sustainable Future with Tech

A walkthrough of the developer portal and APIs
03:29 MIN

A walkthrough of the developer portal and APIs

PoC “Austria Experience Data Hub”

A live demonstration of the itinerary planning app
08:59 MIN

A live demonstration of the itinerary planning app

100 million days in Vienna: A story of APIs & AI in tourism.

Live coding: Initializing an app and creating pages
05:38 MIN

Live coding: Initializing an app and creating pages

Modern Web Development with Nuxt3

Implementing global layouts and application routing
02:34 MIN

Implementing global layouts and application routing

Independently together: how micro-applications improve developer experience + app performance

Demonstrating a multi-version and multi-framework app
03:58 MIN

Demonstrating a multi-version and multi-framework app

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Implementing the UI with React Map GL and Grid
09:15 MIN

Implementing the UI with React Map GL and Grid

React and the power of visualisation

Live coding a basic app and inspecting the DOM
04:57 MIN

Live coding a basic app and inspecting the DOM

Is Flutter ready for the web yet? - A live coding comparison between Flutter and React

Featured Partners

Related Videos

See all videos
Meet Your New BFF: Backend to Frontend without the Duct Tape51:04

Meet Your New BFF: Backend to Frontend without the Duct Tape

Noam Honig

Add Location-based Searching to Site with ElasticSearch45:13

Add Location-based Searching to Site with ElasticSearch

Derek Binkley

Build Your Own Subscription-based Course Platform1:24:47

Build Your Own Subscription-based Course Platform

Dávid Lévai

Building Apps With a Mixture of Code and No Code36:33

Building Apps With a Mixture of Code and No Code

Mark Piller

Practice makes perfect - when it comes to RxJS33:25

Practice makes perfect - when it comes to RxJS

Jan-Niklas Wortmann

Snappy UI needs no Single-Page Application40:24

Snappy UI needs no Single-Page Application

Clemens Helm

The Art and Craft of Type Development43:20

The Art and Craft of Type Development

Michael Hladky & Stefan Baumgartner

How to Build Truly Production-ready Apps - Modern JS-based SaaS Stack for Indie Devs and Small Teams45:31

How to Build Truly Production-ready Apps - Modern JS-based SaaS Stack for Indie Devs and Small Teams

Dávid Lévai

Related Articles

View all articles
CH
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take part
Starting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
WeAreDevelopers LIVE days are changing - get ready to take part
LM
Luis Minvielle
10 Developer Websites in 2023
As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
10 Developer Websites in 2023
LM
Luis Minvielle
The Best Upcoming IT Webinars
Now that you already know what IT webinars are and how they can help you level up your professional appeal, you might want actually to get into one. Live tech webinars are one of the best ways to stay on top of the latest trends and tools because eit...
The Best Upcoming IT Webinars
DC
Daniel Cranney
Next.js App Router: Explained
IntroductionVercel’s Next.js has come a long way since its initial release in 2016. What would become the most popular React framework (according to their own website, at least), started as a simple solution for handling routing, SEO optimisation and...
Next.js App Router: Explained

From learning to earning

Jobs that call for the skills explored in this talk.