Polygon Arrays

HTML

<div id="wrapper">
  <svg id="res_svg">
    <g id="Reservation_layer" data-geometry-type="polygon" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,6,5)" style="display: block;">
      <g></g>
      <path id="reservation-path" fill="rgb(0, 0, 255)" fill-opacity=".15" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 77 9 L 76 15 L 76 16 L 82 16 L 81 22 L 81 29 L 83 29 L 88 30 L 95 29 L 95 30 L 95 36
L 97 36 L 102 36 L 102 37 L 102 43 L 102 50 L 103 50 L 109 50 L 110 43 L 117 43 L 124 43 L 131 43 L 138 43
L 144 43 L 144 43 L 144 50 L 145 50 L 153 52 L 152 59 L 159 60 L 159 67 L 166 67 L 193 66 L 193 73 L 200 73
L 200 80 L 207 80 L 208 87 L 214 87 L 214 94 L 215 101 L 214 122 L 221 122 L 221 129 L 228 129 L 228 143 L 235 144
L 235 151 L 241 151 L 241 158 L 241 165 L 249 165 L 249 179 L 255 179 L 256 186 L 262 186 L 261 215 L 261 223 L 268 223
L 267 245 L 266 273 L 266 301 L 266 316 L 273 316 L 273 330 L 287 330 L 287 337 L 294 337 L 294 344 L 301 344 L 301 351
L 301 359 L 307 359 L 307 366 L 314 366 L 321 366 L 321 373 L 321 380 L 328 380 L 328 386 L 332 387 L 336 387 L 343 387
L 343 394 L 347 394 L 351 395 L 358 395 L 365 395 L 365 402 L 365 404 L 365 406 L 365 409 L 373 409 L 373 416 L 373 423
L 380 423 L 380 431 L 380 438 L 373 438 L 373 445 L 373 459 L 380 459 L 380 466 L 387 466 L 387 473 L 387 480 L 380 480
L 380 487 L 380 494 L 372 494 L 372 501 L 372 508 L 365 508 L 366 519 L 366 519 L 369 520 L 373 520 L 379 520 L 379 520
L 383 520 L 386 520 L 387 520 L 393 520 L 401 520 L 408 520 L 414 520 L 415 520 L 415 527 L 422 527 L 422 533 L 436 534
L 451 534 L 451 541 L 458 541 L 458 549 L 465 549 L 471 549 L 478 549 L 478 556 L 479 563 L 485 562 L 486 569 L 492 569
L 492 577 L 493 591 L 493 598 L 493 604 L 493 619 L 493 626 L 493 633 L 493 640 L 493 647 L 500 647 L 500 662 L 507 662
L 507 669 L 513 668 L 513 675 L 520 675 L 520 682 L 534 682 L 535 689 L 542 689 L 545 689...

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  width: 638px;
  height: 762px;
}

#wrapper {
  position: relative;
  border: 1px dash grey;
}

#res_svg {
  height: 762px;
  width 638px;
  overflow: visible;
  position: absolute;
  z-index: 9999;
  /* display: none; */
}

JavaScript

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

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
    }, //lat: 41.3724029, lng: -123.9009415},
    mapTypeId: 'roadmap'
  });

  // Map polygon coordinates
  var polyCoordinates = [];
  for (var i = 0; i < points.length; i += 2) {
    var longitude = toLongitude(parseInt(points[i]) + 6),
      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;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Polygon</b><br>' +
    'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
    '<br>';

  // Iterate over the vertices.
  for (var i = 0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i +...