PolyLine for drawing lines between markers

[copperstick6]

Hey! I'm relatively new to this package, and I've been messing with it for the past couple of days. I'm just wondering if there is support for PolyLines (drawing and connecting markers) and if there are, please add a small code sample so that I can test it! Thanks in advance.

[copperstick6]

I think I figured it out, but would like confirmation.. By utilizing the onMapCreated callback I can then utilize google.maps.Polyline to draw my polylines. Closing issue since I found the solution =).

[copperstick6]

var polyline = new google.maps.Polyline({ I'm having an error here where google.maps is not defined. Any tips on solving this issue?

[MicheleBertoli]

Hello @copperstick6 Are you running that code inside onMapCreated? Can you please provide a non-working example?

[copperstick6]

yeah sure, here's my onMapCreated method:

  onMapCreated(map) {   
    map.setOptions({   
      disableDefaultUI: true   
    });   
    var coords = [];   
    for(var i = 0; i < this.props.list.length; i++){   
      coords.push({lat: this.props.list[i].lat, lng: this.props.list[i].long});   
    }  
    var polyline = new google.maps.Polyline({   
      path: coords,  
      geodesic: true,  
      strokeColor: '#FF0000',  
      strokeOpacity: 1.0,  
      strokeWeight: 2  
    });  
    polyline.setMap(map);  
  }

The error is: Line 192: 'google' is not defined no-undef

So the output of coords should look something like this:

var flightPlanCoordinates = [
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];

[copperstick6]

So how I have it set up is the Map is a child component being rendered within two components. I've done some searching, but they all seem to point to putting the Githubissues.

Githubissues is a development platform for aggregating issues.