Convert SVG polygon path to lat and long coordinates

Question

tl;dr: How can I convert a SVG polygon path to gps coordinates, or an identical google.maps.Polygon?

My high level objective is to determine if 20,000 of individual GPS coordinates are within a fixed area (geofence). I already have the gps coordinates saved, and I have a basic idea of how I'm going to test if they are in the area.

Where I'm at now is trying to convert the path into the GPS lat/long, which I'm sure is just a formula, and I'll need to reconcile the 0,0 and scale - this answer was promising: https://stackoverflow.com/a/24171749/550595, which I used for the "conversion", but the result isn't even close.

I have a SVG polygon path, that I borrowed from a different map (not google maps, but it's close enough), and I rendered it over the map: https://jsfiddle.net/2n2jmj8L/1/

var width = 624, // width of SVG
  height = 746; // height of SVG

function toLongitude(x) {
  return x * 180 / width;
}

function toLatitude(y) {
  return -y * 180 / width + 90;
}

function initMap() {
  // The SVG path;
  var path = document.getElementById("reservation-path").getAttribute("d");

  // Get the points. Even indices are x coordinates and odd indices are y
  // coordinates. Note that these are strings.
  var points = path.match(/(\d+)/g);

  map = new google.maps.Map(document.getElementById('map'), {
    streetViewControl: false,
    //scrollwheel: false,
    disableDefaultUI: true,
    draggable: false,
    zoom: 11,
    center: {
      lat: 41.3671863,
      lng: -123.8799729
    },
    mapTypeId: 'roadmap'
  });

  // Map polygon coordinates
  var polyCoordinates = [];
  for (var i = 0; i < points.length; i += 2) {
    var longitude = toLongitude(parseInt(points[i]) + 6),//I added the 6 and the following 5 to offset the parent transform
      latitude = toLatitude(parseInt(points[i + 1]) + 5);

    polyCoordinates.push(new google.maps.LatLng(latitude, longitude));
  }

  console.log(polyCoordinates);

  var polygon = new google.maps.Polygon({
    paths: polyCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  polygon.setMap(map);

  // Add a listener for the click event.
  polygon.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

On a side note... Google Maps/Places outlines the area I want to use as my geofence: https://www.google.com/maps/place/Yurok+Reservation,+Trinity-Klamath,+CA/@41.373847,-123.9471508,11z/data=!4m5!3m4!1s0x54d1a8156f591fd5:0xbcbca4e17d7d8801!8m2!3d41.3724029!4d-123.9009415 but I wasn't able to do anything with that other than use it as a reference.

I've already wasted too much time on this, so even if I need to scrap what I have, I will. All I want to do is to be able to loop through a set of coordinates, and return if they are in the path in my JSFiddle.

Thanks in advance...

Answer 1

This page appears to document how to convert a screen pixel coordinate to lat/long coordinates.

https://developers.google.com/maps/documentation/javascript/examples/map-coordinates