Help with Placing markers on Map

Ionic Framework ionic-v3
1

Hello,

I am trying to place markers with text on it on a map based on locations and labels from a collection, the map displays but the markers don’t show

Please help

Here is my map.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, ViewController, NavController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';
declare var google;
@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  places: any;
    constructor(public navCtrl: NavController, public viewCtrl: ViewController, public restProvider: RestProvider) {
    this.getPlaces();
  }

  // map 
  getPlaces() {
    this.restProvider.getPlaces()
      .then(data => {
        this.places = data;
        if (this.places) {
          for (let element of this.places) {
            var marker = new google.maps.Marker({
              position: { lat: parseFloat(element.Latitude), lng: parseFloat(element.Longitude) },
              title: element.message.substring(0, 30),
              visible: true,
              map: this.map              
            });
            console.log(element);
          };
          //this.directionsDisplay.setMap(this.map);
        }
      });
  }
  alts = this.getPlaces();
  ionViewDidLoad() {

    this.initMap();
  }

  async  initMap() {
    console.log(this.places);

    this.map = new google.maps.Map(this.mapElement.nativeElement, {
      zoom: 14,
      center: { lat: 6.57499666666667, lng: 3.355785 }
    });
  }

  goTo(page) {
    this.navCtrl.push(page);
  }



}

here is the result I get

mapimg