I create a map with this tutorial:
http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/
It works, but I don’t know how to add a marker, I tried how I see in so many other tutorials and examples but nothing works.
This is my home.ts code:
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, GoogleMapsMarker, GoogleMapsMarkerOptions, CameraPosition } from 'ionic-native';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;
constructor(public navCtrl: NavController, private platform: Platform) {
platform.ready().then(() => {
this.loadMap();
});
}
loadMap(){
var onSuccess = function(position) {
let location = new GoogleMapsLatLng(position.coords.latitude,position.coords.longitude);
this.map = new GoogleMap('map', {
'backgroundColor': 'white',
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
},
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true,
'zoom': true
},
'camera': {
'latLng': location,
'tilt': 30,
'zoom': 15,
'bearing': 50
}
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
// create CameraPosition
let position: CameraPosition = {
target: location,
zoom: 18,
tilt: 30
};
// move the map's camera to position
this.map.moveCamera(position);
let markerOptions: GoogleMapsMarkerOptions = {
position: location,
title: 'Ionic'
};
this.map.addMarker(markerOptions)
.then((marker: GoogleMapsMarker) => {
marker.showInfoWindow();
});
});
}
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
}
the marker does not even show, help please.