Primeng: GMap should check if Map API is loaded

[jleuleu]

The GMap component does not check that the Google Maps API has finished loading.
As the Google Maps API script is loaded asynchronously, it may not be ready when the GMap component tries to use it.
When this happens, an exception "google is not defined" is raised.

How to reproduce it:
Go to http://www.primefaces.org/primeng/#/gmap and refresh the page until it happens.

Or for reproducing at 100%, just remove the google maps api script tag.

[garethlewis]

You have two choices. The first is to remove the async defer tags from Google Maps in the index.html file. It will block your page until it has loaded, and then you won't have your problem. The other way, which will still block and therefore isn't actually any better, but looks better as it contains code is to use a callback function from loading of the google maps api. You will need to write a pure javascript function in index.html, which handles the callback from the google maps loading, and then this calls the SystemJS or Webpack bootstrap code.

[kcsahoo]

The problem is with type definition missing.

In index.html, put this line

just before

In package.json, put this line
"@types/google-maps": "3.1.28",
in devdependencies and run npm install

The primeng example has one line which is to be replaced as the syntax has changed.

existing:
new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),

replace with:
new google.maps.Circle({ center: new google.maps.LatLng(36.90707, 30.56533), fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),

It works like a charm.
This is a great control by primeng although the documentation is lacking.

[moudatsos]

@kcsahoo

In index.html, put this line

just before

Correct me if I'm wrong but there seems to be something missing from your comment: the "_this line_" and "_just before_" pieces of information

Could you add them, please?

[homofortis]

I run a bare test of GMap component and can confirm the issue as stated by OP. In my case not waiting for API to load results in "ReferenceError: Can't find variable: google" making all Google API unreachable.
P.S. Removed async and defer from script tag and it works now.