How to implement Google Maps API (initMap) in Angular 4?

Question

I try to integrate Google Maps in Angular.

index.html

<script async defer src="https://maps.googleapis.com/maps/api/js?key=api_key&callback=initMap"></script>

example.component.html

...
<div id="map"></div>
...

example.component.ts

...
ngAfterViewInit() {
        function initMap() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    }

I got still the error "initMap is not a function".

Lazar Ljubenović · Accepted Answer · 2019-09-19 06:30:26Z

1

It breaks because initMap function is not available when Google's script tries to call it. It's also not globally available as Google' script expects (it's scoped to the class).

There's an existing library called Angular Google Maps whose purpose is using Google Maps with Angular applications.

edited Sep 19, 2019 at 6:30

answered Aug 13, 2017 at 16:12

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DanPride Over a year ago

I understood that AGM was primarily for simple use cases and for more difficult application that installing the javascript version was prefered ??

Mauricio Gracia Gutierrez · Accepted Answer · 2019-09-19 14:28:27Z

After looking arround for other solutions I ended up using Angular Google Maps npm module

Using these steps it help me to get started - https://angular-maps.com/guides/getting-started/ - map is showing perfect.

Steps:

npm install @agm/core

In the app.module.ts add this:

import { AgmCoreModule } from '@agm/core'

//on imports section
AgmCoreModule.forRoot({
  apiKey: 'YOUR_Maps_JavaScript_API_KEY_HERE'
})

In the component (.ts) that you want to show the map do this :

lat : number;
lng : number;

ngOnInit() {
    this.prepareMap() ;
}

prepareMap() {
    this.lat = 51.678418;
    this.lng = 7.809007;

    console.log("prepareDivMap finished");
}

in the corresponding .css file add this:

agm-map {
    height: 300px;
}

in the corresponding html part add this:

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

An here is the result of google maps embedded into a angular component using agm

Collectives™ on Stack Overflow

How to implement Google Maps API (initMap) in Angular 4?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related