I'm currently working on implementing multiple markers on a map within my Ionic 2 app.
//Establishing connection to locations database
this.db.connect();
let locations = this.db.collection('locations');
//Fetching all user locations from the database
locations.fetch().subscribe(msg => console.log(msg));
//Iterating through each location to add markers
for (let i = 0; i < 10; i++) {
let pin = locations[i];
let location: any;
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position : {"lat": 2433, "lng": 234}
});
//Information displayed in marker window on the Map
let content =
//User profile details
'<h3>Name: </h3>' + this.user.details.name +
'<h3>Email: </h3>' + this.user.details.email +
'<h3>Image: </h3>' + '<img src='+this.user.details.image+'>' +
'<button id="sendRequest()" (click)>Request Walk</button>';
this.addInfoWindow(marker, content);
}
//end of locations loop
Currently, I'm using placeholder coordinates for latitude and longitude. However, I have actual location data including user email, lat, and lng values in my locations database. I can see this data in my console log.
My main goal is to figure out how to access and utilize this data to accurately plot multiple markers on the map.