ReferenceError: google is undefined when using PrimeNG GMap
I am using PrimeNg GMap in my project but I am getting "ReferenceError: google not defined" error I am following this link for documentation https://www.primefaces.org/primeng/#/gmap . and please tell me how to add api key for GMap. error image
My component
import {GMapModule} from 'primeng/primeng';
@Component({
selector: 'mycomponent',
templateUrl: './mycomponent.component.html',
[})
export c][1]lass MyComponent implements OnInit {
options: any;
overlays: any[];
ngOnInit() {
this.options = {
center: {lat: 36.890257, lng: 30.707417},
zoom: 12
};
this.overlays = [
new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
new google.maps.Polygon({paths: [
{lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
}),
new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
];
}
HTML code
<p-gmap [options]="options" [overlays]="overlays" [style]="{'width':'100%','height':'320px'}" ></p-gmap>
source to share
You need to download and use the google.maps javascript library. See the documentation: https://developers.google.com/maps/documentation/javascript/tutorial
The PrimeNG component is just a thin Angular wrapper for the google map javascript library.
source to share
PrimeNG documentation on this bit is not great, but looked at the GitHub repo nonetheless. Try adding google API Script to Index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE"></script>
Please note that you will need to add your own api key.
Also note that I removed the asynchronous defragmentation as it was throwing an error on page load.
source to share
The code that needs to be declared on top of the component declare var google: any;
will work for you.
import {GMapModule} from 'primeng/primeng';
declare var google: any; //new added line
@Component({
selector: 'mycomponent',
templateUrl: './mycomponent.component.html',
})
export class MyComponent implements OnInit {
options: any;
overlays: any[];
ngOnInit() {
this.options = {
center: {lat: 36.890257, lng: 30.707417},
zoom: 12
};
this.overlays = [
new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
new google.maps.Polygon({
paths: [
{lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
}),
new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
]; }
source to share