flutterdartgoogle-mapsgeofencing

How to take Map area as user input in flutter?


I managed to implement drawing areas on Google Maps from code but would also like the user to draw his specific area then show it on any given Map.

Any Help will be appreciated. Thank you!


Solution

  • For interactive drawing check:

    https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

    There is a polygon tool:

    enter image description here

    You might be interested into drawing a Polyline with code. Read more at:

    https://developers.google.com/maps/documentation/javascript/shapes

    For that you would need an array of Longitude/Latitude coordinates. The sample below is taken from the Google API's documentation:

    // This example creates a 2-pixel-wide red polyline showing the path of
    // the first trans-Pacific flight between Oakland, CA, and Brisbane,
    // Australia which was made by Charles Kingsford Smith.
    function initMap() {
      const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 3,
        center: { lat: 0, lng: -180 },
        mapTypeId: "terrain",
      });
      const 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 },
      ];
      const flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
      });
    
      flightPath.setMap(map);
    }
    
    window.initMap = initMap;