Germán Álvarez
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.
Matching moments
03:29 MIN
The technical journey of building the climate map
From Code to Cause: Building a Sustainable Future with Tech
Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Upgrade to PRO for unlimited access to the full archive.
You have an account? Log in
03:29 MIN
A walkthrough of the developer portal and APIs
PoC “Austria Experience Data Hub”
Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Upgrade to PRO for unlimited access to the full archive.
You have an account? Log in
08:59 MIN
A live demonstration of the itinerary planning app
100 million days in Vienna: A story of APIs & AI in tourism.
Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Upgrade to PRO for unlimited access to the full archive.
You have an account? Log in
05:38 MIN
Live coding: Initializing an app and creating pages
Modern Web Development with Nuxt3
Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Upgrade to PRO for unlimited access to the full archive.
You have an account? Log in
02:34 MIN
Implementing global layouts and application routing
Independently together: how micro-applications improve developer experience + app performance
Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Upgrade to PRO for unlimited access to the full archive.
You have an account? Log in
03:58 MIN
Demonstrating a multi-version and multi-framework app
Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios
Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Upgrade to PRO for unlimited access to the full archive.
You have an account? Log in
09:15 MIN
Implementing the UI with React Map GL and Grid
React and the power of visualisation
Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Upgrade to PRO for unlimited access to the full archive.
You have an account? Log in
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
Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Upgrade to PRO for unlimited access to the full archive.
You have an account? Log in
Featured Partners
Related Videos
52:01Unleash your web skills on native!
Rowdy Rabouw
40:24Snappy UI needs no Single-Page Application
Clemens Helm
35:15Extensionator - Rise of the Chromium
Keren Kenzi
40:01Progressive Web Apps - The next big thing
Nico Martin
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
30:36The Eventloop in JavaScript - How does it work?
Christian Woerz
1:24:47Build Your Own Subscription-based Course Platform
Dávid Lévai
43:20The Art and Craft of Type Development
Michael Hladky & Stefan Baumgartner
Related Articles
View all articles
.webp?w=240&auto=compress,format)
From learning to earning
Jobs that call for the skills explored in this talk.
JO Media Software Solutions GmBh
Brunn am Gebirge, Austria
Senior
CSS
Angular
JavaScript
TypeScript
Lotum media GmbH
Bad Nauheim, Germany
Senior
Node.js
JavaScript
TypeScript
Google Analytics
Barcelona, Spain
Intermediate
HTML
tarent solutions GmbH
GIT
HTML
Vue.js
tarent solutions GmbH
GIT
HTML
Vue.js
tarent solutions GmbH
GIT
HTML
Vue.js
Vesterling Consulting GmbH
Köln, Germany
Remote
HTML
Node.js
Zebresel - Deine Agentur für d igitale Medien.
GIT
HTML
Vue.js
Node.js