Google Maps Ionic 2

Hi all,

I am trying to retrieve longitude and latitude coordinates from my Ionic database and place them as markers for a number of different users in my “locations” database. I am able to retrieve the code in my console.log, but I am unsure how to use it to place markers around the map.

this.db.connect();
let locations = this.db.collection(‘locations’);

    let marker = new google.maps.Marker({
        map: this.map,
        animation: google.maps.Animation.DROP,
        position: locations.fetch().subscribe(msg => console.log(msg))
      });

the database “locations” contains email, id, lat and lng data. Could someone please tell me what code I could use i would be very greatful!

Thanks,
Rob

Josh Morony has several very good articles on using Google maps with Ionic…

(Josh Morony - Google Maps)

You don’t indicate if you are using API, or native? Below is code I use with Ionic Google Maps Native to plot points from an array, and use a custom marker (number) for each point…

  addMarkers() {
    for (let i = 0; i < this.deliveryList.length; i++) {
      let order = this.deliveryList[i];
      let location: any;

      location = this.getLocation(this.location,this.deliveryList[i].lat,this.deliveryList[i].lon);

      let image = './assets/img/number_' + (i + 1).toString() + '.png';

      let markerOptions: GoogleMapsMarkerOptions = {
        position: location,
        title: order.businessName,
        snippet: order.address + '\nDistance: ' + order.distanceString,
        icon: image
      };

      this.map.addMarker(markerOptions)
        .then((marker: GoogleMapsMarker) => {
          if (i === 0) {
            marker.showInfoWindow();
          }
        })
    }
  }
  //---------------------------------------------------------------------
  getLocation(location: any, lat: any, lon: any): any {
    if (lat != "" && lat != "NA") {
      location = new GoogleMapsLatLng(lat, lon);
    }
    return location;
  }

image This is what my console log looks like. I tried your code but can’t quite get it to work for me. would you have any ideas?

I suggest you do whichever Josh Morony tutorial matches your needs.

For NATIVE Google maps basically you need…

for (let i = 0; i < whateverYourArrayIsCalled.length; i++) {
      let marker = whateverYourArrayIsCalled[i];
      let location: any;

      location = new GoogleMapsLatLng(marker.lat, marker.long);

      let markerOptions: GoogleMapsMarkerOptions = {
        position: location,
        title: marker.email,
        snippet: 'This is a point on my map'
      };

      this.map.addMarker(markerOptions)
}