Draw a polyline formed by coordinate arrays on the Google Maps plugin

Ionic Native
1

I’m trying to draw a polyline for each array of coordinates.
The coordinates that come from the backend are:

coordinates: [
[
12.224054049999998, //lng
43.140818433333294 //lat
],
[
12.22411594999999,
43.14074315
],
[
12.224317933333333,
43.140877399999965
],
…

I create the map in this way following the Ionic guide:

import { GoogleMaps, GoogleMap, GoogleMapOptions, GoogleMapsEvent, CameraPosition } from '@ionic-native/google-maps';

constructor(private googleMaps: GoogleMaps) {
    oadMap() {
    let element: HTMLElement = document.getElementById('map');
    let coordinates = this.retrieveCoordinates(); 

    let mapOptions: GoogleMapOptions = {
      mapType: 'MAP_TYPE_TERRAIN',
      camera: {
          target: {
            lat: 43.110717,
            lng: 12.390828
          },
          zoom: 15
      }
    }

    let map: GoogleMap = this.googleMaps.create(element, mapOptions);

    map.one(GoogleMapsEvent.MAP_READY).then(
      () => {
        console.log('Map is ready!');
        
        map.addPolyline({
            points: coordinates,
            'color' : '#AA00FF',
            'width': 10,
            'geodesic': true
        });
      }
    );   
  }
}

But I don’t draw any lines. How do I have to draw my points on the map?

2

I found the solution. I had to convert my list to an object

coordinates = coordinates.map(function(point) {
          return {lat: point[1], lng: point[0]};
        });
2 Likes
3

Hi,
Can i daw a polyline without using api ?