こんにちは。Anguarjs2とonsenUI2を使ってハイブリッドアプリを作成しているのですが、Angularjs2のGoogleMapAPIを使ってAutoCompleteをしたいと思っています。
以下コード全容です
import { Component, NgModule, OnInit, ViewChild, ElementRef } from '@angular/core'; import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms"; import { BrowserModule } from "@angular/platform-browser"; import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core'; // import {GoogleplaceDirective} from '../googleplace.directive'; import {NgModel} from '@angular/forms'; @Component({ selector: 'app-root', styles: [` .sebm-google-map-container { height: 300px; } `], template: ` <google-search-bar></google-search-bar> <div class="container"> <div class="form-group"> <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl"> </div> <sebm-google-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom"> <sebm-google-map-marker [latitude]="latitude" [longitude]="longitude"></sebm-google-map-marker> </sebm-google-map> </div> ` }) export class GoogleMap implements OnInit { public latitude: number; public longitude: number; public searchControl: FormControl; public zoom: number; public fuzzyControl: FormControl; public address:string; @ViewChild("search") public searchElementRef: ElementRef; constructor( private mapsAPILoader: MapsAPILoader ) {} ngOnInit() { //set google maps defaults this.zoom = 4; this.latitude = 39.8282; this.longitude = -98.5795; //create search FormControl this.searchControl = new FormControl(); this.fuzzyControl = new FormControl(); //set current position this.setCurrentPosition(); this.setMapsAPILoader(); //load Places Autocomplete this.mapsAPILoader.load().then(() => { let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, { types: ["address"] }); autocomplete.addListener("place_changed", () => { //get the place result let place: google.maps.places.PlaceResult = autocomplete.getPlace(); //set latitude and longitude this.latitude = place.geometry.location.lat(); this.longitude = place.geometry.location.lng(); }); }); } private setCurrentPosition() { if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition((position) => { this.latitude = position.coords.latitude; this.longitude = position.coords.longitude; this.zoom = 12; }); } }
エラー文です。AutoCompleteのプロパティがないと言われています。
Unhandled Promise rejection: Cannot read property 'Autocomplete' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'Autocomplete' of undefined(…) TypeError: Cannot read property 'Autocomplete' of undefined
あなたの回答
tips
プレビュー