Using direction service google maps no ionic 3


#1

I’m trying to use directionService to plot a polyline from a point A to B.

I follow the best courts.

First create the map, download the plugin plugin @ionic-native / google-maps

 let mapOptions: GoogleMapOptions = {
 camera: {
    target: {
      lat: 0,
      lng: 0
    },
    zoom: 16, //14
    bearing: 0
 },
 controls: {
   compass: true,
   myLocationButton: true,
   mapToolbar: false
 },
 gestures: {
   scroll: true,
   tilt: true,
   rotate: false,
   zoom: true
 },
 };
 this.message = 'map_is_ready';
 let mapElement: HTMLElement = document.getElementById('map');
 this.map = GoogleMaps.create(mapElement, mapOptions);
 this.map.setVisible(true);

After that, get some points to put on the map, when it is clicked on these points that perform a function that should build the path to the point where I created it. A function is in this form:

setPolylineDirectionMyAndPoint(start, end) {
  const request = { // Novo objeto google.maps.DirectionsRequest, contendo:
    origin: start, // origem
    destination: end, // destino
    travelMode: google.maps.TravelMode.WALKING // meio de transporte, nesse caso, apé
  };

  this.directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      const plyPath = [];
      const legs = result.routes[0].legs;
      for (let i = 0; i < legs.length; i++) {
        var steps = legs[i].steps;
        for (let j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (let k = 0; k < nextSegment.length; k++) {
            plyPath.push(nextSegment[k]);
          }
        }
      }
      const polyline = new google.maps.Polyline({
        path: plyPath,
        strokeColor: '#0032e9',
        strokeWeight: 8
      });
    }
  });
}

I made this attempt and also tried to create by the plugin itself:

let polylineOptions = {
  points: plyPath,
  'color': '# 0032e9',
  'width': 8,
  'geodesic': true,
};
this.map.addPolyline (polylineOptions) .then ((polyline: Polyline) => {
});

But it gives an error saying that addPolyline is not a function, I create severalpolylines and everything works perfectly, but for this it does not work correctly. I know that for the plugin itself I can not do it however I’m trying to get the points and myself to set these points on the map.

How to solve this problem? I need the path from me to the point where I clicked.


#2

Just a guess really but you might need to import the Polyline class:

import { Polyline } from '@ionic-native/google-maps';