draw a polyline around a search area

mapfunctions.js

var w = window.innerWidth;
var input = document.getElementById("pac-input");
if (w < 600) {
  input.style.width = "300px";
}
input.style.borderRadius = "2px";
input.style.height = "50px";

var chicago = { lat: 41.85, lng: -87.65 };
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}

function makeMarkerIcon(markerColor, size, point) {
  var markerImage = new google.maps.MarkerImage(
    "http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|" +
      markerColor +
      "|40|_|%E2%80%A2",
    null,
    null,
    null,
    new google.maps.Size(...size)
  );
  return markerImage;
}

function CenterControl(controlDiv, map) {
  var controlUI = document.createElement("div");
  controlUI.className = "control-ui";
  controlUI.style.backgroundColor = "#f4623a";
  controlUI.style.border = "2px solid #fff";
  controlUI.style.borderRadius = "3px";
  controlUI.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlUI.style.cursor = "pointer";
  controlUI.style.marginTop = "10px";
  controlUI.title = "Click to search the map";
  controlDiv.appendChild(controlUI);
  var controlText = document.createElement("div");
  controlText.style.color = "rgb(25,25,25)";
  controlText.style.fontWeight = "bold";
  controlText.style.fontSize = "28px";
  controlText.style.lineHeight = "38px";
  controlText.style.paddingLeft = "5px";
  controlText.style.paddingRight = "5px";
  controlText.innerHTML = "Search " + '<i class="fas fa-search"/>';
  controlText.style.color = "white";
  controlUI.appendChild(controlText);
  controlUI.addEventListener("click", function () {
    openSearch();
  });
}

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 42.02815, lng: -87.7197 },
    zoom: 8,
    mapTypeId: "roadmap",
    styles: redStyle,
  });

  /**
   * Creates an array of coordinates from the content of the MultiGeometryCoordinates node of the GADM database.
   */
  function buildCoordinatesArrayFromString(MultiGeometryCoordinates) {
    var finalData = [];
    var grouped = MultiGeometryCoordinates.split("\n");

    grouped.forEach(function (item, i) {
      let a = item.trim().split(",");

      finalData.push({
        lng: parseFloat(a[0]),
        lat: parseFloat(a[1]),
      });
    });

    return finalData;
  }

  console.log("performing ajax");
  if (false) {
    $.ajax({
      async: true,
      url: "citieskml/gadm36_USA_2.js",
      success: function (result) {
        // var xmlDoc = new DOMParser().parseFromString(result, "text/xml");
        console.log(result, "xmlDoc");
        const KmlString = result;
      },
      error: function (err) {
        console.log("error:", err);
      },
    });
  }

  console.log("after the ajax");

  let kmlAreaData = `-73.077796936035,7.18019914627087 
-73.0765991210938,7.17500114440924 
-73.0805969238281,7.16109991073608 
-73.081199645996,7.14789915084839 
-73.0748977661132,7.13860082626343 
-73.0655975341797,7.13280010223394 
-73.0626983642578,7.12929916381836 
-73.0673980712889,7.1263999938966 
-73.0759963989258,7.10970115661621 
-73.084098815918,7.10449981689459 
-73.0943984985352,7.09769916534424 
-73.1088027954102,7.08269977569586 
-73.1156997680664,7.07289981842052 
-73.1231994628906,7.07060003280645 
-73.1300964355469,7.05680179595953 
-73.1393966674804,7.05340003967291 
-73.1473999023437,7.05050086975098 
-73.152099609375,7.05919981002808 
-73.1601028442383,7.06330013275158 
-73.1688003540039,7.06389999389648 
-73.1802978515624,7.06629991531383 
-73.1843032836913,7.07320117950451 
-73.1860961914062,7.08760023117071 
-73.1884002685546,7.1096010208131 
-73.1815032958984,7.12750101089489 
-73.1780014038085,7.15230083465588 
-73.1781005859374,7.17660093307501 
-73.1763000488281,7.18930006027233 
-73.1770782470703,7.19456291198725 
-73.1682968139647,7.19389915466314 
-73.1636962890624,7.1995987892152 
-73.1591033935547,7.20250082016003 
-73.1452026367187,7.211100101471 
-73.1360015869141,7.21739912033081 
-73.1261978149414,7.22079992294312 
-73.1199035644531,7.22370100021362 
-73.1118011474609,7.2241997718811 
-73.1078033447265,7.22540187835699 
-73.1054992675781,7.22540187835699 
-73.1054992675781,7.22129917144787 
-73.1048965454102,7.21269989013683 
-73.1048965454102,7.20340108871466 
-73.1031036376953,7.19760084152222 
-73.0973968505859,7.1911988258363 
-73.0915985107421,7.18540000915522 
-73.0864028930664,7.18370008468634 
-73.077796936035,7.18019914627087`;

  var BucaramangaDelimiters = buildCoordinatesArrayFromString(kmlAreaData);
  // console.log(BucaramangaDelimiters, "buca kml obj copy it");
  // // Construct the polygon.
  var BucaramangaPolygon = new google.maps.Polygon({
    paths: BucaramangaDelimiters,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  // // Draw the polygon on the desired map instance
  // console.log(BucaramangaPolygon, "polygon");
  // BucaramangaPolygon.setMap(map);

  // var georssLayer = new google.maps.KmlLayer({
  //   url:
  //     "http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss",
  // });
  // georssLayer.setMap(map);

  var centerControlDiv = document.createElement("div");
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(centerControlDiv);
  let defaultSize = [21, 34];
  let selectedSize = [27, 40];
  var defaultIcon = makeMarkerIcon("BE3600", defaultSize);
  var highlightedIcon = makeMarkerIcon("FFFF24", selectedSize);

  for (var x in markers) {
    name = markers[x].name;
    lat = parseFloat(markers[x].lat);
    lng = parseFloat(markers[x].lng);
    description = markers[x].description;
    id = markers[x].id;
    featuredImg = markers[x].image;
    console.log(featuredImg, "featured img");

    let marker = new google.maps.Marker({
      position: { lat: lat, lng: lng },
      icon: defaultIcon,
      name: name,
      description: description,
      building_id: id,
      map: map,
      featuredImg: featuredImg,
    });

    marker.addListener("mouseover", function () {
      this.setIcon(highlightedIcon);
    });
    marker.addListener("mouseout", function () {
      this.setIcon(defaultIcon);
    });

    google.maps.event.addListener(marker, "click", function (e) {
      console.log(marker, "marker");
      console.log("**************************!!!!!!!!!!!!!!!!!!!");
      console.log(marker.position.lat(), marker.position.lng());
      $("#building-image").css(
        "background-image",
        "url('images/" + marker.featuredImg + "')"
      );
      $("#building-name").html(marker.name);
      $("#building-description").html(marker.description);
      $("#units-link").html(
        "<a href='view_units.php?id=" +
          marker.building_id +
          "'>Units and floor plans</a>"
      );
      $("#building-photos").html(
        "<a href='building_images.php?id=" +
          marker.building_id +
          "'>View building photos</a>"
      );
      $("#directions-link").html(
        `<a target="new" href="https://www.google.com/maps/dir/?api=1&destination=${marker.position.lat()},${marker.position.lng()}">Get Directions to this building</a>`
      );
      $("#infoWindowModal").modal("show");
    });
  }

  var input = document.getElementById("pac-input");
  var searchBox = new google.maps.places.SearchBox(input);
  searchBox.setBounds(map.getBounds());
  map.markers = []; // ADD THIS LIN

  for (var i = 0; i < markers.length; i++) {
    //  console.log('markers at i', markers[i])
    //  console.log('markers[i][1]', markers[i][1])
    //  console.log('markers[i].lat', markers[i].lat)
    //  console.log('markers[i].lng', markers[i].lng)
    //  console.log('markers[i].name', markers[i].name)
    myLatLng = new google.maps.LatLng(markers[i].lat, markers[i].lng);
    marker = new google.maps.Marker({
      position: myLatLng,
      title: markers[i].name,
    });
    map.markers.push(marker);
  }

  searchBox.addListener("places_changed", function () {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      //   console.log('no places listed')
      return;
    } else {
      //   console.log('there are places returned')
    }
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function (place) {
      if (!place.geometry) {
        return;
      }
      if (place.geometry.viewport) {
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    closeSearch();
    map.fitBounds(bounds);
    console.log(input.value, "=kjh input here is yea");
    Request__drawVal(input.value);
    showVisibleMarkers(map);
  });

  function draw_Val(arr) {
    console.log("drawing val w poly", arr);
    var searchedPolygon;
    var coordsToDraw = new Array();

    for (var i = 0; i < arr.length; i++) {
      coordsToDraw[i] = new google.maps.LatLng(
        parseFloat(arr[i][1]),
        parseFloat(arr[i][0])
      );
    }
 
    searchedPolygon = new google.maps.Polygon({
      paths: coordsToDraw,
      strokeColor: "red",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#6666FF",
      fillOpacity: 0.35,
    });
    searchedPolygon.setMap(map);
  }

  function Request__drawVal(val) {
    console.log("he searched val: ", val);
    console.log("make ajax");
    $.ajax({
      async: true,
      url: `https://nominatim.openstreetmap.org/search.php?q=${val}&polygon_geojson=1&format=jsonv2`,
      success: function (result) {
        // console.log(result[0].geojson.coordinates[1], "result");
        const polygonArr = result[0].geojson.coordinates[0];
        draw_Val(polygonArr);
      },
      error: function (err) {
        console.log("error:", err);
      },
    });
  }
}

function showSwal(count) {
  if (count > 0) {
    return setTimeout(function () {
      swal(
        "Awesome",
        `You found <b style="color:green;">${count}</b> listings! Click on one to see more details`,
        "success"
      );
    }, 1700);
  }
  return setTimeout(function () {
    swal(
      "No Results!",
      `Your search returned <b style="color:red;">${count}</b> buildings, maybe sign up and add some listings? its free, why not?`,
      "error"
    );
  }, 1700);
}

function showVisibleMarkers(map) {
  let buildingCount = 0;
  let j;
  var bounds = map.getBounds();
  for (j = 0; j < map.markers.length; j++) {
    if (bounds.contains(map.markers[j].getPosition()) === true) {
      buildingCount++;
    } else {
    }
    // console.log(map.markers[j], 'map.markers at index')
  }
  console.log("the search component returned " + buildingCount + " listings");
  showSwal(buildingCount);
  buildingCount = 0;
}

Hello, Abe
Can you send me screen image of your dev console when this is working on New York with wrapping parseFloat?

nevermind, ive already solved it.. the api was returning [[]] instead of []