How to add a marker with cordova-plugin-googlemaps


#1

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.


#2

Hi

addMarkers() {
this.map.on(GoogleMapsEvent.MAP_READY).subscribe((map) => {
map.addMarker({   
 'position': new GoogleMapsLatLng(latitude, longitude),
 'title': title
  }, (marker) => {
      marker.addEventListener(GoogleMapsEvent.INFO_CLICK, () => {
      console.log("You clicked " + marker.getTitle());
      });
    });
  });
}

It works for me