Multiple Google Maps Marker with data from firebase

@Katjusch wrote:

Hi there,
I currently working on setting multiple Google maps Markers with addresses from firebase.
But I'm really confused about getting/ looping through the data from firebase the right way and to use it for the markers then.

My datastructure in firebase is:

foodList
- food key
|__ address
|__ some other data ...
- food key
|__ address
|__ some other data ...

I'm using native geocoder to translate the addresses in lat and long

---

That's my code so far:

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


    @ViewChild('map') mapElement;
    map: any;
    public currentLocation;
    public foodLocations;
    public address;

    public getAddresses: Array<any>;

    constructor(public navCtrl: NavController,
        public foodlistdataProvider: FoodlistdataProvider,
        public geolocation: Geolocation,
        public nativeGeocoder: NativeGeocoder) {
    }

    ionViewDidEnter() {
        this.initMap();
        this.getAddressdata();
    }

    initMap() {

        this.geolocation.getCurrentPosition().then((position) => {
            let LatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            this.currentLocation = LatLng;

            let mapOptions = {
                center: LatLng,
                zoom: 15,
                navigationControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

            this.addMarkerCurrentPosition();

        }, (error) => {
            console.log(error);

            });

    }

    addMarkerCurrentPosition() {

        let marker = new google.maps.Marker({
            position: this.currentLocation,
            map: this.map
        });

    }

    getAddressdata() {

//is this the right way to get the address data?
        this.foodlistdataProvider.getAddresses().on('value', snapshot => {
           this.address = snapshot.val().address
        });

        this.addFoodAddresses(this.address);

        }

    addFoodAddresses(markers) {

        for (let marker of markers) {
            this.nativeGeocoder.forwardGeocode(this.address)
                .then((coordinates: NativeGeocoderForwardResult) => {
                    let Address = new google.maps.LatLng(markers.coordinates.latitude, markers.coordinates.longitude);


                    let marker = new google.maps.Marker({
                        position: Address,
                        map: this.map
                    });

                });
        }
    }

I'm stucked and would really appricate some help! cheers

Posts: 1

Participants: 1

Read full topic