CODEWITHSUNDEEP
google-mapsionic-frameworkionic2ionic3ionic-native
Taras Synenkyy
Taras Synenkyy

Reputation: 27

Typescript Error Cannot find name ‘google’

if i save the file twice its run, but dont know why google.maps.ts

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)


}

}

this is the error code...

Typescript: C:/ionic/restaurante/IESAljada/src/components/google-map/google-map.ts, line: 22

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

Upvotes: 1

Views: 4512

Answers (3)

Jakegarbo
Jakegarbo

Reputation: 1301

Please try the sample code from the official docs

https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/README.md

Installation

$> ionic cordova plugin add cordova-plugin-googlemaps \
  --variable API_KEY_FOR_ANDROID="(API_KEY_FOR_ANDROID)" \
  --variable API_KEY_FOR_IOS="(API_KEY_FOR_IOS)"

$> npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest

code 

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map: GoogleMap;
  constructor() { }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
           lat: 43.0741904,
           lng: -89.3809802
         },
         zoom: 18,
         tilt: 30
       }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'blue',
      animation: 'DROP',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
  }
}

Upvotes: 0

Pradnya Sinalkar
Pradnya Sinalkar

Reputation: 1146

Try this basic example. Declare

declare var google;

in your typescript file. Like below: 

declare var google;

@Component( {
    selector: 'page-example',
    templateUrl: 'example.html'
} )
export class GoogleMapExample {
    @ViewChild( 'map' ) mapElement: ElementRef;
    map: any;
    private defaultLat = 56.1304;
    private defaultLng = 106.3468;

    ionViewDidLoad() {
        this.loadMap();
    }

    private loadMap = () =>{
        let latLng = new google.maps.LatLng( this.defaultLat, this.defaultLng );
        console.log("latLng====>",latLng);
        let mapOptions = {
            center: latLng,
            zoom: 15,
            disableDefaultUI: true
        }
        this.map = new google.maps.Map( this.mapElement.nativeElement, mapOptions );
    }
}

And HTML will be : <div #map id="map"></div>

Upvotes: 0

snipsnipsnip
snipsnipsnip

Reputation: 2585

google.maps.MapOtpions looks like a typo. Did you mean google.maps.MapOptions?

Upvotes: 1

Related Questions