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