Adding markers from Json file to Google Maps

@perenyitamas wrote:

Hey!
Trying to show all the locations from my json file on google maps with ionic native google maps plugin:

I have a seperate provider containing the data, i would like to use for cycle and load all the markers, json example:

“locations”: [

{
    "title": "Kerek-tó",
    "latitude": 47.800618,
    "longitude": 18.806419
},

export class TerkepPage {
  map:GoogleMap;
  lat:any; lang:any;
  constructor(public locations: HelyekProvider,private toastCtrl: ToastController,private plt: Platform,private geolocation: Geolocation, public navCtrl: NavController) {

    this.plt.ready().then(()=>{
      var options={timeout: 15000};

      this.geolocation.getCurrentPosition(options).then(resp=>{
        this.lat=resp.coords.latitude;
        this.lang=resp.coords.longitude;
        this.loadGoogleMap();
      }).catch(()=>{
        console.log("sikertelen location");
        this.lat=47.49801;
        this.lang=19.03991;
        this.loadGoogleMap();
        this.presentToast();
      });

    });
  }
  ionViewDidLoad(){

  }
  presentToast() {
    let toast = this.toastCtrl.create({
      message: 'A helyadatok lekérdezése nem sikerült! Budapest lett megjelölve!',
      duration: 3000,
      position: 'bottom',
      showCloseButton: true,
      closeButtonText: "OK",


    });
    toast.present();
  }
  loadGoogleMap(){
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: this.lat,
          lng: this.lang
        },
        zoom: 10,
        tilt: 30
      }
    };
    let map = GoogleMaps.create('map_canvas', mapOptions);
    let locationsLoaded = this.locations.load();
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {

        this.map.addMarker({

            title: 'Jelenlegi helyzet',
            icon: 'yellow',
            animation: 'DROP',
            position: {
              lat: this.lat,
              lng: this.lang
            }
          })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {

              });
          });

      });
  }

The provider i am loading:

load(){

        if(this.data){
            return Promise.resolve(this.data);
        }

        return new Promise(resolve => {

            this.http.get('assets/data/locations.json').map(res => res.json()).subscribe(data => {

                this.data = this.applyHaversine(data.locations);

                this.data.sort((locationA, locationB) => {
                    return locationA.distance - locationB.distance;
                });

                resolve(this.data);
            });

        });

    }

Can anyone help me to add all those markers with the titles in my json file?

Posts: 1

Participants: 1

Read full topic