show data polygon on google maps

Question

I have xml results from a mysql database, which I get from geometry column. How can I display that on google maps?

This my xml:

Answer 1

You need to parse that "Well Known Text" (WKT) POLYGON to an array of google.maps.LatLng objects, then use them to set the path of a google.maps.Polygon

The code below, from the related question Convert Well-known text (WKT) from MySQL to Google Maps polygons with PHP, modified to reverse the latitude and longitude, works for me:

// from https://stackoverflow.com/questions/16482303/convert-well-known-text-wkt-from-mysql-to-google-maps-polygons-with-php/16502322#16502322
// but with latitude and longitude reversed
function parsePolyStrings(ps) {
    var i, j, lat, lng, tmp, tmpArr,
        arr = [],
        //match '(' and ')' plus contents between them which contain anything other than '(' or ')'
        m = ps.match(/\([^\(\)]+\)/g);
    if (m !== null) {
        for (i = 0; i < m.length; i++) {
            //match all numeric strings
            tmp = m[i].match(/-?\d+\.?\d*/g);
            if (tmp !== null) {
                //convert all the coordinate sets in tmp from strings to Numbers and convert to LatLng objects
                for (j = 0, tmpArr = []; j < tmp.length; j+=2) {
                    lng = Number(tmp[j]);
                    lat = Number(tmp[j + 1]);
                    tmpArr.push(new google.maps.LatLng(lat, lng));
                }
                arr.push(tmpArr);
            }
        }
    }
    //array of arrays of LatLng objects, or empty array
    return arr;
}

proof of concept fiddle

code snippet:

var geocoder;
var map;

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 xml = parseXml(xmlStr);
  var markers = xml.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    var polygonStr = markers[i].getAttribute("shape");
    if (polygonStr.indexOf("POLYGON") != -1) {
      var paths = parsePolyStrings(polygonStr);
      for (var j = 0; j < paths[0].length; j++) {
        bounds.extend(paths[0][j]);
      }
      var poly = new google.maps.Polygon({
        paths: paths,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      });
      poly.setMap(map);
    }
  }
  map.fitBounds(bounds);
}
// from https://stackoverflow.com/questions/16482303/convert-well-known-text-wkt-from-mysql-to-google-maps-polygons-with-php/16502322#16502322
// but with latitude and longitude reversed
function parsePolyStrings(ps) {
  var i, j, lat, lng, tmp, tmpArr,
    arr = [],
    //match '(' and ')' plus contents between them which contain anything other than '(' or ')'
    m = ps.match(/\([^\(\)]+\)/g);
  if (m !== null) {
    for (i = 0; i < m.length; i++) {
      //match all numeric strings
      tmp = m[i].match(/-?\d+\.?\d*/g);
      if (tmp !== null) {
        //convert all the coordinate sets in tmp from strings to Numbers and convert to LatLng objects
        for (j = 0, tmpArr = []; j < tmp.length; j += 2) {
          lng = Number(tmp[j]);
          lat = Number(tmp[j + 1]);
          tmpArr.push(new google.maps.LatLng(lat, lng));
        }
        arr.push(tmpArr);
      }
    }
  }
  //array of arrays of LatLng objects, or empty array
  return arr;
}
google.maps.event.addDomListener(window, "load", initialize);

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}
var xmlStr = '';

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