(resolved)GMap native or Gmap Javascipt Api Problem to insert marker(from Rest) on map

Hey there !
I retrieve a representation of marker object from my Rest backEnd.
That’s work correctly .

But when i try to insert it on my maps (i have a gmap native and a gmap javascript api). The marker didn’t show in the booth maps.

The method i use to add marker works with my local marker that i created for test. And i think the method should work the same with the marker i retrieve on Rest.

Here is the code:
GMAP NATIVE

export class PrincipalPage {
    private markersRest: markerModel[];
   // private markers: MarkerMapping.MarkerMap[]; used for testing local markers
    public map: GoogleMap;
    private selfmarker: Marker;
    public subscription: any;







    constructor(private markerRestProv: MarkerRestProvider, private geoLocation: Geolocation, private events: Events, private googleMaps: GoogleMaps, public menuCtrl: MenuController, public navCtrl: NavController, public navParams: NavParams, public platform: Platform) {
        this.events.subscribe('menu:opened', () => {
            this.map.setClickable(false);
        });

        this.events.subscribe('menu:closed', () => {
            this.map.setClickable(true);
        });


    }


    ionViewDidLoad() {
        this.loadMap();
    }



    ionViewWillLeave() {
        this.subscription.unsubscribe();
    }


    loadMap() {
        let element: HTMLElement = document.getElementById('mapnative');
        this.map = this.googleMaps.create(element);
        this.markers = MarkerMapping.MarkerppingMock;
        // listen to MAP_READY event
        // You must wait for this event to fire before adding something to the map or modifying it in anyway
        this.map.one(GoogleMapsEvent.MAP_READY).then(
            () => {
                this.geoLocation.getCurrentPosition().then((resp) => {
                    let pos: CameraPosition = {
                        target: new LatLng(resp.coords.latitude, resp.coords.longitude),
                        zoom: 12,
                        tilt: 0
                    };
                    this.map.moveCamera(pos);
                });

                this.subscription = this.geoLocation.watchPosition()
                    .filter((p) => p.coords !== undefined) //Filter Out Errors
                    .subscribe(position => {
                        console.log(position.coords.latitude, position.coords.longitude)
                        let userPosition: LatLng = new LatLng(position.coords.latitude, position.coords.longitude);
                        if (this.selfmarker != null && position.coords.latitude != 0 && position.coords.longitude != 0) {
                            this.selfmarker.setPosition(userPosition);
                        } else {
                            let markerIcon = {
                                'url': 'https://lh3.googleusercontent.com/zPPRTrpL-rx7OMIqlYN63z40n2UBJDa3I3n5C3Z9YtKGsTXPfdtks18Y0gdvfcz6tEsV=w170',
                                'size': {
                                    width: 20,
                                    height: 20,
                                }
                            }
                            let markerOptions: MarkerOptions = {
                                position: userPosition,
                                icon: markerIcon
                            };
                            this.map.addMarker(markerOptions).then((marker) => { this.selfmarker = marker; });
                        }
                    });
                this.markerRestProv.getAllMarkersRest().then(markerFetched => {
                    this.markersRest = markerFetched;
                    for (var marker of this.markersRest) {
                        console.log(marker); // have the good object here
                        this.addMarkerOnMap(marker);
                    }
                });
                /* It's working with local marker 
                for (var marker of this.markers) {
                    this.addMarkerOnMap(marker);
                }*/
            });
    }
     private addMarkerOnMap(markerRest: markerModel) {
        let markerPosition: LatLng = new LatLng(markerRest.lat, markerRest.lng); // have the good value here
        console.log(markerRest.title + " " + markerRest.id); // have the good value here
        let markerOptions: MarkerOptions = {
            position: markerPosition,
            title: 'title',
            snippet: 'Touch for more infos',

        };
        this.map.addMarker(markerOptions)
            .then((marker: Marker) => {
                marker.addEventListener(GoogleMapsEvent.INFO_CLICK).subscribe(
                    (data) => {
                        console.log("Click");
                    }
                );
                // marker.showInfoWindow();
            });
    }

GMAP Javscript API

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { AddSportPlaceDetailPage } from '../add-sport-place-detail/add-sport-place-detail';
import { MarkerRestProvider } from '../../providers/marker-rest/marker-rest';
import { markerModel } from '../../models/marker.model';
/**
 * Generated class for the AddSportPlacePage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
declare var google;

@Component({
  selector: 'page-add-sport-place',
  templateUrl: 'add-sport-place.html',
})
export class AddSportPlacePage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  position: any;
  private markersRest: markerModel[];

  constructor(private markerRestProv: MarkerRestProvider, public loadingCtrl: LoadingController, public navCtrl: NavController, public navParams: NavParams, public geolocation: Geolocation) {

  }

  ionViewDidLoad() {
    this.loadMap();
  }
  ionViewDidEnter() {
    this.presentLoadingDefault();
  }


  loadMap() {



    this.geolocation.getCurrentPosition().then((position) => {

      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

      google.maps.event.addListener(this.map, 'click', (event) => {
        //alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
        this.navCtrl.push(AddSportPlaceDetailPage,
          { position: event }
        );
      });



      let marker = new google.maps.Marker({
        map: this.map,
        animation: google.maps.Animation.DROP,
        position: latLng,
        icon: 'assets/images/megeoloc.png'
      });


      this.markerRestProv.getAllMarkersRest().then(markerFetched => {
        this.markersRest = markerFetched;
        for (var marker of this.markersRest) {
          console.log(marker);
          this.addMarkerOnMap(marker);
        }
      });

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

  }
  private addMarkerOnMap(markerRest: markerModel) {
    let latLng = new google.maps.LatLng(markerRest.lat, markerRest.lng);
    console.log(markerRest.lng);
    let marker = new google.maps.Marker({
        map: this.map,
        animation: google.maps.Animation.DROP,
        position: latLng,
    });
  }
  private clickMainFAB() {
    alert("Click on the map where you want to add the sport place");
  }

  presentLoadingDefault() {
    let loading = this.loadingCtrl.create({
      content: 'Please wait 3 seconds...'
    });

    loading.present();

    setTimeout(() => {
      loading.dismiss();
    }, 3000);
  }
}

I tried to separe the load map and the addMarkeronMap. But it didnt work too!

Thanks for your help!

After checking, it was a mistake in the back end side latitude was swapped with the longitude!

I will spank hard my back end develloper partner! :smiley: