Google Maps & Angular Tutorial - Quickstart Using the Google Maps Javascript API

A short tutorial how to get started with Google Maps in Angular.

Maybe your are also interested in:

(00:00) - Intro
(00:12) - Enable API & Create API Key in Google Cloud
(01:11) - Check the Maps Javascript API Documentation
(02:00) - Install Dependencies and Configure
(02:24) - Dispaly the Map on the Webpage
(04:52) - Style your Map

[DDD-lgxx]

Thanks for the step-by-step! Easy to understand, really appreciated.

[kkrasovski]

Thanks from Belarus. Very clear video. Helped set up the map for my first time. Your English speed is amazing. Everything is clear without a translator. I subscribe.

[alexander]

Super clear instructions and explanation!!! The best video I saw about the Google map component!!! Thanks a lot!

[hassanramadan]

You are a professional instructors. You seriously saved me. Thanks a lot.

[ameerhamza]

You deserve millions of likes and Subscribes! Precise and to the point and you save us a lot of time <3.

[kylespencer]

Straight to the point, really great video

[nguyenhoa]

Great work! It's easy to get started over your short video. Thank you!

[Florijan]

Google Maps already loaded outside may result in undesirable behavior as options and script parameters may not match. ?? Can someone Help ?

[MhmmDonuts]

Could u propably make a video how to use google maps by passing it directions and get the data from the google server as an object? like travel time etc. ?

[salarkazazi]

Thank you so much, very resourceful !

[saranraj]

In component file- (document.getELementById("map"), showing error --- argument of type 'HTMLElement | null' is not assignable to paramater of type 'Element'.
*New google.maps.Map(document.getElementById("map"), {

[joachimheirbrant]

if you want to add a marker in the center of the map u can use this instead:

loader.load().then(() =>{

const uluru = { lat: 51.0543422, lng: 3.7174243 };

const map = new google.maps.Map(
as HTMLElement,
{zoom: 17, center: uluru, })

const marker = new google.maps.Marker({
position: uluru,
map: map,
})