OSM to Google Maps polygons

I want to draw a city district area on Google Maps using Polygon class and an array of lat/lng coordinates.

OpenStreetMap provides me all data I need — if I type some district name I can get useful data in OSM XML format, for example OSM drawn polygon of “Vecmilgravis” district in Riga, Latvia and it's data in OSM XML format.

The problem is all those node nodes are sorted in some weird order, so if I just extract all lat and lng pairs and make an coordinates array for Google Maps Polygon class I see not what I've expected:

Markers are displayed correctly 'cos coordinates order is not important for them, but polygon is messed up 'cos of wrong coordinates order I copypasted from OSM data.

So, how do I extract (or sort manually) OSM nodes coordinates in right order?

This is probably the "right" way to do it:

parse through the XML save the nodes with their associated ids
parse through the "way" tags to order them within those segments
order the "way" paths end to end (assume there is a common point for adjacent ways)
create a polygon with the completed path

(there might be a more efficient way to do it)

code snippet:

var geocoder;
var map;
var centerPt;
var markers = [];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var path = [];
  var xmldata = xmlParse(xmlBoundaryData);
  var nodes = xmldata.getElementsByTagName("node");
  var bounds = new google.maps.LatLngBounds();
  var nodeArray = [];
  // get the coordinate data out of the "nodes"
  for (var i = 0; i < nodes.length; i++) {
    var pt = new google.maps.LatLng(nodes[i].getAttribute("lat"),
      nodes[i].getAttribute("lon"));
    path.push(pt);
    nodeArray[nodes[i].getAttribute("id")] = pt;
    var marker = new google.maps.Marker({
      position: pt,
      map: map,
      title: "" + i
    })
    markers.push(marker);
    bounds.extend(pt)
  }
  var waysArray = [];
  // get the ways, putting the "nodes" in "way" order
  var ways = xmldata.getElementsByTagName("way");
  for (var j = 0; j < ways.length; j++) {
    var waypath = [];
    var nd = ways[j].getElementsByTagName("nd");
    for (var i = 0; i < nd.length; i++) {
      waypath.push(nodeArray[nd[i].getAttribute("ref")]);
    }
    waysArray.push(waypath);
    var waypoly = new google.maps.Polyline({
      path: waypath,
      map: map,
      strokeColor: "#0000FF"
    })
  }
  // assemble the "ways" into a polygon by concatenating together at the common points
  console.log("number of ways="+waysArray.length);
  var polypath = [];
  for (var i = 0; i < waysArray.length; i++) {
    if (i == 0) {
      // first "way"
      console.log("way 0, ends at " + waysArray[i][0].toUrlValue(6));
      for (var j = 0; j < waysArray[i].length; j++) {
        polypath.push(waysArray[i][j]);
      }
    } else if (polypath[polypath.length - 1].equals(waysArray[i][0])) {
      console.log("way " + i + ", ends at " + waysArray[i][0].toUrlValue(6));
      for (var j = 1; j < waysArray[i].length; j++) {
        polypath.push(waysArray[i][j]);
      }
    } else if (polypath[polypath.length - 1].equals(waysArray[i][waysArray[i].length - 1])) {
      console.log("way " + i + " (rev), ends at " + waysArray[i][waysArray[i].length - 1].toUrlValue(6));
      for (var j = waysArray[i].length - 2; j >= 0; j--) {
        polypath.push(waysArray[i][j]);
      }
    } else {
      // not adjacent to the end, try again later (push it on to the end of the array)
      waysArray.push(waysArray[i]);
    }
  }
  var polygon = new google.maps.Polygon({
    map: map,
    path: polypath
  });
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, "load", initialize);

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}
var xmlBoundaryData = '<?xml version="1.0" encoding="UTF-8"?><osm version="0.6" generator="CGImap 0.4.0 (20233 thorn-01.openstreetmap.org)" copyright="OpenStreetMap and contributors" attribution="http://www.openstreetmap.org/copyright" license="http://opendatacommons.org/licenses/odbl/1-0/"><node id="939092112" visible="true" version="3" changeset="9125708" timestamp="2011-08-25T22:47:10Z" user="Raitisx" uid="105318" lat="57.0408668" lon="24.0680754"><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></node><node id="956004391" visible="true" version="5" changeset="36231114" timestamp="2015-12-28T22:52:59Z" user="AkageMuk" uid="2012081" lat="57.0299437" lon="24.1089277"><tag k="name" v="Vecmīlgrāvis"/><tag k="name:de" v="Alt-Mühlgraben"/><tag k="name:lv" v="Vecmīlgrāvis"/><tag k="name:ru" v="Вецмилгравис"/><tag k="place" v="suburb"/><tag k="wikipedia" v="lv:Vecmīlgrāvis"/><tag k="wikipedia:ru" v="Вецмилгравис"/></node><node id="1412648728" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:50Z" user="Raitisx" uid="105318" lat="57.0237064" lon="24.1172858"/><node id="1412648732" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:50Z" user="Raitisx" uid="105318" lat="57.0237837" lon="24.1146783"/><node id="1412648733" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0239283" lon="24.1201001"/><node id="1412648734" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0239694" lon="24.1120189"/><node id="1412648735" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0244130" lon="24.1218642"/><node id="1412648741" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0252736" lon="24.1235470"/><node id="1412648742" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0252901" lon="24.1068387"/><node id="1412648745" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0259421" lon="24.0865922"/><node id="1412648749" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0267091" lon="24.1003177"/><node id="1412648750" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0272530" lon="24.0901290"/><node id="1412648753" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0272650" lon="24.1261230"/><node id="1412648754" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0277863" lon="24.0940634"/><node id="1412648755" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0277928" lon="24.0850352"/><node id="1412648760" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0298488" lon="24.1289978"/><node id="1412648766" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0322322" lon="24.0795026"/><node id="1412648767" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0324695" lon="24.1317941"/><node id="1412648768" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0336179" lon="24.1289290"/><node id="1412648769" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0342914" lon="24.1256628"/><node id="1412648770" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0346037" lon="24.1223190"/><node id="1412648771" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0348498" lon="24.1188739"/><node id="1412648772" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0348667" lon="24.0758427"/><node id="1412648775" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0353858" lon="24.1167861"/><node id="1412648783" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0377249" lon="24.1087940"/><node id="1412648786" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0382325" lon="24.0717365"/><node id="1412648787" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0383366" lon="24.1072823"/><node id="1412648788" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0398108" lon="24.1061825"/><node id="1412648789" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0403684" lon="24.1061945"/><node id="1412648792" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0418628" lon="24.1028049"/><node id="1412648793" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0425852" lon="24.0987029"/><node id="1412648798" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0430687" lon="24.0645903"/><node id="1412648799" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0438158" lon="24.0914262"/><node id="1412648807" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0457390" lon="24.0602339"/><node id="1412648809" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0473897" lon="24.0573897"/><node id="1412648814" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0485238" lon="24.0617057"/><node id="1412648815" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0489709" lon="24.0779074"/><node id="1412648819" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0492422" lon="24.0800514"/><node id="1412648821" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0493233" lon="24.0747645"/><node id="1412648822" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0493467" lon="24.0661118"/><node id="1412648828" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0497404" lon="24.0808749"/><node id="1412648829" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0501426" lon="24.0720512"/><node id="1412648830" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0501439" lon="24.0696934"/><node id="939092310" visible="true" version="3" changeset="9125708" timestamp="2011-08-25T22:47:11Z" user="Raitisx" uid="105318" lat="57.0299390" lon="24.0828947"><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></node><node id="2001673384" visible="true" version="2" changeset="27351748" timestamp="2014-12-09T09:08:56Z" user="AkageMuk" uid="2012081" lat="57.0379682" lon="24.1081640"/><node id="1412648777" visible="true" version="2" changeset="13788614" timestamp="2012-11-07T18:35:26Z" user="briedisUNrepshe" uid="780955" lat="57.0365649" lon="24.1126203"/><node id="1940326011" visible="true" version="2" changeset="27418924" timestamp="2014-12-12T11:12:48Z" user="AkageMuk" uid="2012081" lat="57.0454766" lon="24.0884690"/><way id="127683755" visible="true" version="3" changeset="13314024" timestamp="2012-09-30T19:10:18Z" user="iav" uid="80180"><nd ref="1412648789"/><nd ref="1412648792"/><nd ref="1412648793"/><nd ref="1412648799"/><nd ref="1940326011"/><nd ref="1412648828"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683753" visible="true" version="2" changeset="9316551" timestamp="2011-09-16T14:24:13Z" user="Raitisx" uid="105318"><nd ref="1412648767"/><nd ref="1412648760"/><nd ref="1412648753"/><nd ref="1412648741"/><nd ref="1412648735"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683754" visible="true" version="2" changeset="9316551" timestamp="2011-09-16T14:24:14Z" user="Raitisx" uid="105318"><nd ref="1412648735"/><nd ref="1412648733"/><nd ref="1412648728"/><nd ref="1412648732"/><nd ref="1412648734"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683772" visible="true" version="2" changeset="9316551" timestamp="2011-09-16T14:24:15Z" user="Raitisx" uid="105318"><nd ref="1412648734"/><nd ref="1412648742"/><nd ref="1412648749"/><nd ref="1412648754"/><nd ref="1412648750"/><nd ref="1412648745"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683719" visible="true" version="3" changeset="13788614" timestamp="2012-11-07T18:35:30Z" user="briedisUNrepshe" uid="780955"><nd ref="1412648789"/><nd ref="1412648788"/><nd ref="1412648787"/><nd ref="2001673384"/><nd ref="1412648783"/><nd ref="1412648777"/><nd ref="1412648775"/><nd ref="1412648771"/><nd ref="1412648770"/><nd ref="1412648769"/><nd ref="1412648768"/><nd ref="1412648767"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683787" visible="true" version="2" changeset="9316551" timestamp="2011-09-16T14:24:16Z" user="Raitisx" uid="105318"><nd ref="1412648809"/><nd ref="1412648814"/><nd ref="1412648822"/><nd ref="1412648830"/><nd ref="1412648829"/><nd ref="1412648821"/><nd ref="1412648815"/><nd ref="1412648819"/><nd ref="1412648828"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="80499981" visible="true" version="6" changeset="9316551" timestamp="2011-09-16T14:24:32Z" user="Raitisx" uid="105318"><nd ref="939092112"/><nd ref="1412648798"/><nd ref="1412648807"/><nd ref="1412648809"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="80500002" visible="true" version="4" changeset="9316551" timestamp="2011-09-16T14:24:35Z" user="Raitisx" uid="105318"><nd ref="939092112"/><nd ref="1412648786"/><nd ref="1412648772"/><nd ref="1412648766"/><nd ref="939092310"/><nd ref="1412648755"/><nd ref="1412648745"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><relation id="1727775" visible="true" version="4" changeset="36231114" timestamp="2015-12-28T22:52:41Z" user="AkageMuk" uid="2012081"><member type="way" ref="127683755" role="outer"/><member type="way" ref="127683719" role="outer"/><member type="way" ref="127683753" role="outer"/><member type="way" ref="127683754" role="outer"/><member type="way" ref="127683772" role="outer"/><member type="way" ref="80500002" role="outer"/><member type="way" ref="80499981" role="outer"/><member type="way" ref="127683787" role="outer"/><member type="node" ref="956004391" role="admin_centre"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="name" v="Vecmīlgrāvis"/><tag k="name:de" v="Alt-Mühlgraben"/><tag k="name:lv" v="Vecmīlgrāvis"/><tag k="name:ru" v="Вецмилгравис"/><tag k="type" v="boundary"/></relation></osm>';

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>

geocodezip

Related questions:

The second one does what I did with an additional constraint:

Sort your list of vertices based on each point's angle with respect to C. You can use atan2(point.y - C.y, point.x - C.x) to find the angle. If two or more vertices have the same angle, the one closer to C should come first.

One option (for a regular polygon) would be to sort the vertices in order of heading around the center:

for (var i = 0; i < nodes.length; i++) {
  var pt = new google.maps.LatLng(nodes[i].getAttribute("lat"),
                                  nodes[i].getAttribute("lon"));
  path.push(pt);
  var marker = new google.maps.Marker({
    position: pt,
    map: map,
    title: ""+i
  })
  bounds.extend(pt)
}
centerPt = bounds.getCenter();
var centerMark = new google.maps.Marker({map:map, title: "center", position: centerPt})
path = path.sort(sortFunc);
var polygon = new google.maps.Polygon({
  map:map,
  path: path
});

function sortFunc(a,b) {
  var bearA = google.maps.geometry.spherical.computeHeading(centerPt,a);
  var bearB = google.maps.geometry.spherical.computeHeading(centerPt,b);
  console.log(bearA +":"+ bearB);
  return (bearA - bearB);
}

With your data, leaves one outlier point in the middle of the polygon, which doesn't seem to make sense (point number 1).

code snippet:

var geocoder;
var map;
var centerPt;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var xmldata = xmlParse(xmlBoundaryData);
  var nodes = xmldata.getElementsByTagName("node");
  console.log("nodes=" + nodes.length);
  var bounds = new google.maps.LatLngBounds();
  var path = [];
  for (var i = 0; i < nodes.length; i++) {
    var pt = new google.maps.LatLng(nodes[i].getAttribute("lat"),
      nodes[i].getAttribute("lon"));
    path.push(pt);
    var marker = new google.maps.Marker({
      position: pt,
      map: map,
      title: "" + i
    })
    bounds.extend(pt)
  }
  centerPt = bounds.getCenter();
  var centerMark = new google.maps.Marker({
    map: map,
    title: "center",
    position: centerPt
  })
  path = path.sort(sortFunc);
  var polygon = new google.maps.Polygon({
    map: map,
    path: path
  });
  map.fitBounds(bounds);
}

function sortFunc(a, b) {
  var bearA = google.maps.geometry.spherical.computeHeading(centerPt, a);
  var bearB = google.maps.geometry.spherical.computeHeading(centerPt, b);
  console.log(bearA + ":" + bearB);
  return (bearA - bearB);
}
google.maps.event.addDomListener(window, "load", initialize);

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}
var xmlBoundaryData = '<?xml version="1.0" encoding="UTF-8"?><osm version="0.6" generator="CGImap 0.4.0 (20233 thorn-01.openstreetmap.org)" copyright="OpenStreetMap and contributors" attribution="http://www.openstreetmap.org/copyright" license="http://opendatacommons.org/licenses/odbl/1-0/"><node id="939092112" visible="true" version="3" changeset="9125708" timestamp="2011-08-25T22:47:10Z" user="Raitisx" uid="105318" lat="57.0408668" lon="24.0680754"><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></node><node id="956004391" visible="true" version="5" changeset="36231114" timestamp="2015-12-28T22:52:59Z" user="AkageMuk" uid="2012081" lat="57.0299437" lon="24.1089277"><tag k="name" v="Vecmīlgrāvis"/><tag k="name:de" v="Alt-Mühlgraben"/><tag k="name:lv" v="Vecmīlgrāvis"/><tag k="name:ru" v="Вецмилгравис"/><tag k="place" v="suburb"/><tag k="wikipedia" v="lv:Vecmīlgrāvis"/><tag k="wikipedia:ru" v="Вецмилгравис"/></node><node id="1412648728" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:50Z" user="Raitisx" uid="105318" lat="57.0237064" lon="24.1172858"/><node id="1412648732" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:50Z" user="Raitisx" uid="105318" lat="57.0237837" lon="24.1146783"/><node id="1412648733" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0239283" lon="24.1201001"/><node id="1412648734" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0239694" lon="24.1120189"/><node id="1412648735" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0244130" lon="24.1218642"/><node id="1412648741" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0252736" lon="24.1235470"/><node id="1412648742" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0252901" lon="24.1068387"/><node id="1412648745" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0259421" lon="24.0865922"/><node id="1412648749" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0267091" lon="24.1003177"/><node id="1412648750" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0272530" lon="24.0901290"/><node id="1412648753" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0272650" lon="24.1261230"/><node id="1412648754" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0277863" lon="24.0940634"/><node id="1412648755" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0277928" lon="24.0850352"/><node id="1412648760" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:51Z" user="Raitisx" uid="105318" lat="57.0298488" lon="24.1289978"/><node id="1412648766" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0322322" lon="24.0795026"/><node id="1412648767" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0324695" lon="24.1317941"/><node id="1412648768" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0336179" lon="24.1289290"/><node id="1412648769" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0342914" lon="24.1256628"/><node id="1412648770" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0346037" lon="24.1223190"/><node id="1412648771" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0348498" lon="24.1188739"/><node id="1412648772" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0348667" lon="24.0758427"/><node id="1412648775" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0353858" lon="24.1167861"/><node id="1412648783" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0377249" lon="24.1087940"/><node id="1412648786" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:52Z" user="Raitisx" uid="105318" lat="57.0382325" lon="24.0717365"/><node id="1412648787" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0383366" lon="24.1072823"/><node id="1412648788" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0398108" lon="24.1061825"/><node id="1412648789" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0403684" lon="24.1061945"/><node id="1412648792" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0418628" lon="24.1028049"/><node id="1412648793" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0425852" lon="24.0987029"/><node id="1412648798" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0430687" lon="24.0645903"/><node id="1412648799" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0438158" lon="24.0914262"/><node id="1412648807" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0457390" lon="24.0602339"/><node id="1412648809" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:53Z" user="Raitisx" uid="105318" lat="57.0473897" lon="24.0573897"/><node id="1412648814" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0485238" lon="24.0617057"/><node id="1412648815" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0489709" lon="24.0779074"/><node id="1412648819" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0492422" lon="24.0800514"/><node id="1412648821" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0493233" lon="24.0747645"/><node id="1412648822" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0493467" lon="24.0661118"/><node id="1412648828" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0497404" lon="24.0808749"/><node id="1412648829" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0501426" lon="24.0720512"/><node id="1412648830" visible="true" version="1" changeset="9125708" timestamp="2011-08-25T22:45:54Z" user="Raitisx" uid="105318" lat="57.0501439" lon="24.0696934"/><node id="939092310" visible="true" version="3" changeset="9125708" timestamp="2011-08-25T22:47:11Z" user="Raitisx" uid="105318" lat="57.0299390" lon="24.0828947"><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></node><node id="2001673384" visible="true" version="2" changeset="27351748" timestamp="2014-12-09T09:08:56Z" user="AkageMuk" uid="2012081" lat="57.0379682" lon="24.1081640"/><node id="1412648777" visible="true" version="2" changeset="13788614" timestamp="2012-11-07T18:35:26Z" user="briedisUNrepshe" uid="780955" lat="57.0365649" lon="24.1126203"/><node id="1940326011" visible="true" version="2" changeset="27418924" timestamp="2014-12-12T11:12:48Z" user="AkageMuk" uid="2012081" lat="57.0454766" lon="24.0884690"/><way id="127683755" visible="true" version="3" changeset="13314024" timestamp="2012-09-30T19:10:18Z" user="iav" uid="80180"><nd ref="1412648789"/><nd ref="1412648792"/><nd ref="1412648793"/><nd ref="1412648799"/><nd ref="1940326011"/><nd ref="1412648828"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683753" visible="true" version="2" changeset="9316551" timestamp="2011-09-16T14:24:13Z" user="Raitisx" uid="105318"><nd ref="1412648767"/><nd ref="1412648760"/><nd ref="1412648753"/><nd ref="1412648741"/><nd ref="1412648735"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683754" visible="true" version="2" changeset="9316551" timestamp="2011-09-16T14:24:14Z" user="Raitisx" uid="105318"><nd ref="1412648735"/><nd ref="1412648733"/><nd ref="1412648728"/><nd ref="1412648732"/><nd ref="1412648734"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683772" visible="true" version="2" changeset="9316551" timestamp="2011-09-16T14:24:15Z" user="Raitisx" uid="105318"><nd ref="1412648734"/><nd ref="1412648742"/><nd ref="1412648749"/><nd ref="1412648754"/><nd ref="1412648750"/><nd ref="1412648745"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683719" visible="true" version="3" changeset="13788614" timestamp="2012-11-07T18:35:30Z" user="briedisUNrepshe" uid="780955"><nd ref="1412648789"/><nd ref="1412648788"/><nd ref="1412648787"/><nd ref="2001673384"/><nd ref="1412648783"/><nd ref="1412648777"/><nd ref="1412648775"/><nd ref="1412648771"/><nd ref="1412648770"/><nd ref="1412648769"/><nd ref="1412648768"/><nd ref="1412648767"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="127683787" visible="true" version="2" changeset="9316551" timestamp="2011-09-16T14:24:16Z" user="Raitisx" uid="105318"><nd ref="1412648809"/><nd ref="1412648814"/><nd ref="1412648822"/><nd ref="1412648830"/><nd ref="1412648829"/><nd ref="1412648821"/><nd ref="1412648815"/><nd ref="1412648819"/><nd ref="1412648828"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="80499981" visible="true" version="6" changeset="9316551" timestamp="2011-09-16T14:24:32Z" user="Raitisx" uid="105318"><nd ref="939092112"/><nd ref="1412648798"/><nd ref="1412648807"/><nd ref="1412648809"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><way id="80500002" visible="true" version="4" changeset="9316551" timestamp="2011-09-16T14:24:35Z" user="Raitisx" uid="105318"><nd ref="939092112"/><nd ref="1412648786"/><nd ref="1412648772"/><nd ref="1412648766"/><nd ref="939092310"/><nd ref="1412648755"/><nd ref="1412648745"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="source" v="Rīgas pilsētas teritorijas plānojums"/></way><relation id="1727775" visible="true" version="4" changeset="36231114" timestamp="2015-12-28T22:52:41Z" user="AkageMuk" uid="2012081"><member type="way" ref="127683755" role="outer"/><member type="way" ref="127683719" role="outer"/><member type="way" ref="127683753" role="outer"/><member type="way" ref="127683754" role="outer"/><member type="way" ref="127683772" role="outer"/><member type="way" ref="80500002" role="outer"/><member type="way" ref="80499981" role="outer"/><member type="way" ref="127683787" role="outer"/><member type="node" ref="956004391" role="admin_centre"/><tag k="admin_level" v="10"/><tag k="boundary" v="administrative"/><tag k="name" v="Vecmīlgrāvis"/><tag k="name:de" v="Alt-Mühlgraben"/><tag k="name:lv" v="Vecmīlgrāvis"/><tag k="name:ru" v="Вецмилгравис"/><tag k="type" v="boundary"/></relation></osm>';

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>

来源：https://stackoverflow.com/questions/36704706/osm-to-google-maps-polygons

标签

google-maps

polygon

openstreetmap