CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsangular-google-maps
MathBob
MathBob

Reputation: 107

Angular-google-maps Polyline Path

I'm trying to draw a simple polyline between two markers using Angular-google-maps. I'm able to have my two markers position, but when I want to create a polyline between them things became a little bit complex.

Maybe my logic is not good. I try in a first time to stock in a variable position of each marker and I put it in array. Then I try to transform this in an google.maps.LatLng() object. But this object is always empty and I have something like this in my console:

_.L lat:ƒ() lng:ƒ() __proto__: Object

Here's my function:

  function drawline (position){
  if (position.latitude === '' || position.longitude === '' ) return;
      var emitterName = position.username;

      if (emitterName == "emitter-python") {
      var coor = [position.latitude, position.longitude];
      var lineCoordinates = new google.maps.LatLng({latitude: coor[0],longitude: coor[1]});
      console.log("coor:", coor); //Print [5,5]
    }else {
        console.log("not emitter1");
      }

      if (emitterName == "emitter-python2") {
        var coor1 = [position.latitude, position.longitude];
        var lineCoordinates1 = new google.maps.LatLng({latitude: coor1[0],longitude: coor1[1]});
        console.log("coor1:", coor1); //Print [5,6]
      }else{
        console.log("not emitter2");
      }

        var pathLine = [
          lineCoordinates,
          lineCoordinates1
        ];
        $scope.polylines = [{
            path: pathLine,
            stroke: {
                color: '#000000',
                weight: 3
            },
            editable: false,
            draggable: false,
            geodesic: true,
            visible: true,
        }];
     }

Upvotes: 1

Views: 2849

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59378

Regarding

Then I try to transform this in an google.maps.LatLng() object. But this object is always empty and I have something like this in my console

_.L lat:ƒ() lng:ƒ() __proto__: Object

in fact it is not empty, to print actual values (lat and lng) in console you could utilize one of the provided methods of google.maps.LatLng class, for example toString():

console.log(latLng.toString())

I guess you are utilizing agularjs-google-maps library, if so then to draw a polygon

<shape name="polygon" 
     paths="{{triangleCoordsAlt}}"
     stroke-color="#FF0000"
     stroke-opacity="0.8"
     stroke-weight="2"
     fill-color="#FF0000"
     fill-opacity="0.35">
   </shape>

the data could be specified in the following format:

 $scope.triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757},
      {lat: 25.774, lng: -80.190}
];

or 

$scope.triangleCoordsAlt = [
      [25.774, -80.190],
      [18.466,-66.118],
      [32.321, -64.757],
      [25.774, -80.190]
];

Here is a demo that demonstrates how to draw a polygon

Upvotes: 1

Related Questions