Initializing Markers and Infowindow in Ionic Google Maps

Question

once again I have met my nemesis, adding google markers and setting content within and info-window. In this code, I have already completed a geolocation, and from my current location I, would like to perform a search on nearby places. The places I search will be retrieved from an Ionic list page I have already implemented. From what ever I choose on the list ex. Fire Stations, I would want my code to perform a Places Search, and the results turn up on my map as markers, with infowindow content from google libraries. My problem is that the markers are not on my map, and you can probably guess, that means no info window. If you could provide me with some direction. I am preforming this in Ionic.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { DirectionPage} from '../direction/direction';

/**
 * Generated class for the PlacesPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

 declare var google;
 this.marker = [];

@Component({
  selector: 'page-places',
  templateUrl: 'places.html',
})
export class PlacesPage {

  places: Array<any>;
  map: any;
  currentLocation: any;
  latitude: Number;
  longitude: Number;
  keyword: String;
  searchType: String;
  distance: Number; 

 constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.latitude = navParams.get('latitude');
    this.longitude = navParams.get('longitude');
    this.keyword = navParams.get('keyword');
    this.searchType = navParams.get('type');
    this.distance = navParams.get('distance');
  }

  ionViewDidLoad() {
    this.queryPlaces().then((results : Array<any>)=>{
      for (let i=0; i < results.length; i++){
        this.createMarker(results[i]);
      }
      this.places = results;
    }, (status)=>console.log(status));
  }

  queryPlaces(){
    this.currentLocation = new google.maps.LatLng(this.latitude,this.longitude);
let mapOptions = {
  zoom: 10,
  center: this.currentLocation,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

this.map = new google.maps.Map(document.getElementById("map"), mapOptions);

let service = new google.maps.places.PlacesService("service");

let request = {
  location : this.currentLocation,
  radius: this.distance,
  types: [this.searchType],
  rankBy: google.maps.places.DISTANCE      
};

return new Promise((resolve,reject)=>{
  service.nearbySearch(request, function(results,status){
    if (status == google.maps.places.PlacesServiceStatus.OK){
      resolve(results);
    }else{
      reject(results);
    }
  });
});    

 } 

 createMarker(place){
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: place.geometry.location,
      title: place.name,
    });

google.maps.event.addListener(marker, 'click', function(){
  let infowindow = new google.maps.infowindow({
    content : this.place
    });
    infowindow.open(this.map,marker);    
  });
}

goToDirectionPage(index){

} 
}

Answer 1

I realized the "I" in infowindow needed to be capitalized. Also, place.geometry.location gets the position for the marker object.

createMarker(place){
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: place.geometry.location,
      title: place.name,
    });

google.maps.event.addListener(marker, 'click', function(){
  let infowindow = new google.maps.InfoWindow({
    content: place.name 
  });
  infowindow.open(this.map,marker);
})