ReferenceError: google is not defined on using PrimeNG GMap

user_7198206 0
Viewed 8819

I am using PrimeNg GMap in my project, but getting error "ReferenceError: google is not defined" 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>
angular-cli primeng angular typescript
4 Answers

Add this script in index.html file with valid google key.

<script src="https://maps.googleapis.com/maps/api/js?key="GOOGLE_MAP_KEY">
</script>
user_106839100

You code need to declare on top of the component declare var google: any; it 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})
    ]; }
user_69076700
Related