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!