How do I add Polylines to a Google Map app in Flutter?

Question

I have a map app that I am building in Flutter and I want to add a campus map, which will be an overlay from a remote kml file eventually. In the first instances I just want to show something on the map, so I grabbed some co-ordinates form that kml file and added them to a List.

List<LatLng> building = [
    LatLng(-2.2320211911239767, 53.475459515730925),
    LatLng(-2.231763699058547, 53.47504046853617),
    LatLng(-2.231605784002795, 53.47507219654),
    LatLng(-2.2317965561189794, 53.47536812388608),
    LatLng(-2.2317697340288305, 53.47537251389184),
    LatLng(-2.231845506433501, 53.475498626591325),
  ];

I have a set of type markers and a set of type polyline

final Set<Marker> _residences = {};
final Set<Polyline> _campusOverlay = {};

I have this code in my _onMapCreated method

setState(() {
      //Show Sample Building Marker
      /* _residences.add(
        Marker(
          markerId: MarkerId('Building'),
          position: _userLocation,
          infoWindow: InfoWindow(
              title: 'This is the title', snippet: 'This is a snippet'),
          icon: BitmapDescriptor.defaultMarker,
        ),
      );*/

      _campusOverlay.add(
        Polyline(
          polylineId: PolylineId('Building'),
          visible: true,
          points: building,
          width: 2,
          color: Colors.red,
        ),
      );
    });

In my GoogleMap widget, I have added the markers and polylines properties.

GoogleMap(
      onMapCreated: _onMapCreated,
      polylines: _campusOverlay,
      markers: _residences,
      ...
      ...

The marker(commented out atm) shows with no problems, but the polyline doesn't. I have seen a number of articles with this code, and I have no build errors, so I am confused as to why nothing is shown.

Am I missing something really obvious here?

[EDIT] -> Added screenshot. The co-ordinates were added to google maps (proper) and this is was is expected.

`-2, 53` and `53, -2` are both valid lat/lng coordinates. It all depends which is which in your use case... but `-2, 53` is in the middle of the Indian Ocean. KML files, as well as geoJSON - if I remember well - use `longitude, latitude` pairs, while Google Maps uses `latitude, longitude`. — MrUpsidown, Feb 04 '20 at 12:21

score 0 · Accepted Answer · answered Feb 04 '20 at 16:06

The issue wasn't with the code, but more the co-ordinates. I grabbed them from a remote KML file that I have access to. Below is an example.

-2.2346792602577352,53.46763821573774,0

I have restricted the map to my city and these co-ordinates are in the middle of the Indian ocean. These seem to be the correct way around.

53.46763821573774, -2.2346792602577352

What I can't understand is how the KML file shows the the overlay at the correct place at the moment. Not the final answer to my problem as I want to read this remote KML file and display the overlay, but for the time being, this is answered for what I wanted to do.

How do I add Polylines to a Google Map app in Flutter?

1 Answers1