Display stored positions into google map

Ionic Framework ionic-v3
1

I want to display stored positions from database into a google map .The code below contains the function initializeMap() which displays the current position also it includes another function which gets the stored positions :

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { VoitureService } from '../../providers/voitureservice';
declare var google;
declare var document;
@Component({
    selector: 'page-geolocalisation',
    templateUrl: 'geolocalisation.html',
    providers: [VoitureService]
})
export class GeolocalisationPage {
    @ViewChild('map') mapElement: ElementRef;
    map: any;
    loader: any;


    lon: any;
    lat: any;
    itemsGeo: any;
    //platform:Platform;
    constructor(public voitureservice: VoitureService, public platform: Platform, public navCtrl: NavController, public geolocation: Geolocation) {
        this.platform = platform;
    }

    ionViewDidLoad() {
        this.initializeMap();

    }
    addInfoWindow(marker, content) {

        let infoWindow = new google.maps.InfoWindow({
            content: content
        });

        google.maps.event.addListener(marker, 'click', () => {
            infoWindow.open(this.map, marker);
        });

    }
    getArrets() {
        this.voitureservice.getAllPositions().subscribe(response => {
            this.itemsGeo = response.geo;
            // this.loader.dismiss();

            for (var i = 0, length = this.itemsGeo.length; i < length; i++) {
                let data = this.itemsGeo[i],
                    posi = new google.maps.LatLng(data.longitude.valueOf(), data.latitude.valueOf());
                let contentadr = data.description + " " + data.pause;


                // Creating a marker and putting it on the map
                //var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                let marker = new google.maps.Marker({
                    position: posi,
                    map: this.map,
                    title: data.description + " " + data.pause,
                    icon: 'assets/icon/beachflag.png'

                });
                this.addInfoWindow(marker, contentadr);
            }
        }
        );
    }

    initializeMap() {


        //   this.presentLoading();
        this.platform.ready().then(() => {
            var minZoomLevel = 6;
            this.geolocation.getCurrentPosition().then((position) => {

                let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                this.lon = position.coords.longitude;
                this.lat = position.coords.latitude;


                this.map = new google.maps.Map(document.getElementById('map'),
                    {
                        zoom: minZoomLevel,
                        center: latLng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP

                    });
                let marker = new google.maps.Marker({
                    map: this.map,
                    animation: google.maps.Animation.DROP,
                    position: latLng
                });

                let content = "<h4>Je suis ici!</h4>";

                this.addInfoWindow(marker, content);

            });


        });
        //getting positions
        this.getArrets();
    }




}

here is the json object result of the web service :

{"geo":[{"idg":"316","longitude":"10.4704804","latitude":"32.1872464"}],"success":1}

the problem that positions doesn’t appear on map ; only current positions is displayed

2

Please fix your code formatting. Indentation is just wrong, code is unreadable.

3

Why aren’t you using ionic-native’s google-maps?