import { Component,ViewChild } from ‘ @angular /core’;

@Component ({
selector: ‘google-map’,
templateUrl: ‘google-map.html’
export class GoogleMapComponent {
google: any;
@ViewChild (“map”) mapElement;
map:any;

constructor() {

ngOnInit(){
	this.initMap();
initMap(){
	let coords = new google.maps.LatLng(37.992667,-1.1146491);
	let mapOptions: google.maps.MapOtpions= {
		center: coords,
		zoom: 17,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	this.map = new google.maps.Map(this.mapElement.nativeElement,
	mapOptions)

error:::

typescript: …/src/components/google-map/google-map.ts, line: 22
Cannot find name ‘google’. Did you mean the instance member ‘this.google’?

  L21:  initMap(){
  L22:      let coords = new google.maps.LatLng(37.992667,-1.1146491);
  L23:      let mapOptions: google.maps.MapOtpions= {

i just noticed that i am using Ionic , not ionic --v2. Could that be a problem?

Hello,

you have declared a variable named google as any inside a class. Thats all, (as far as I see) but I assume you want that the variable named google should represent something that have .maps…

Maybe you should do that or you decare it ouside like
declare var google;
in hope that magic late binding finds something matching.

Maybe this tutorial helps.

joshmorony - Build Mobile Apps with HTML5 – 10 Feb 16
  • https://stackoverflow.com/questions/34931771/how-to-load-google-maps-api-asynchronously-in-angular2
  • https://github.com/SebastianM/angular-google-maps/blob/master/packages/core/services/maps-api-loader/lazy-maps-api-loader.ts
  • Also see:

  • https://stackoverflow.com/questions/36064697/how-to-install-typescript-typings-for-google-maps/42733315#42733315
  • For example:

    import {} from '@types/googlemaps';
      public ngOnInit() {
        this.mapsApiLoaderService.load().then(res => {
          this.loadMap();
      private loadMap() {
        const opts: google.maps.MapOptions = {
          center: new google.maps.LatLng(this.currentPosition.latitude, this.currentPosition.longitude),
                  

    It’s better to just install the types for Google maps: npm install @types/googlemaps --save

    Declaring the variable will work, but that’s basically just a way to ignore the types completely. Installing the types means you won’t need to add workaround code, and you get the benefit of using the appropriate types.

    Hello,
    my english and my explenation are not the best, so I try mostly to link to people how can explain thinks better. You do a great job with your tutorials. Thanks for that.

    Your new tutorial is newer, but it use capacitor which is not production ready (as you stated) Maybe this makes for the thread creator more confusing.

    Best regards, anna-liebt.
    Bytheway, I think I must look to a tutorial to create and integrate web components in my work.