CODEWITHSUNDEEP
javascriptgoogle-maps
brother
brother

Reputation: 8171

Polygon locations from string?

I have a string containg locations for a polygon. My problem is, that i cannot figure out how i convert this string, back to lat lng objects, that i can use, to plot the polygon onto a google map.

This is my data

var geometry = "(55.595892233825545, 12.663964033126831),(55.595486072831385, 12.66323447227478),(55.5953284569849, 12.665669918060303),(55.59621352237994, 12.664951086044312)"
var polygon = new google.maps.Polygon({
   paths: geometry,
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#FF0000',
   fillOpacity: 0.35
});

But obviously, that does not work. i have tried to find a function, to convert my string back to locations objects, but without luck.

Any ideas?

Upvotes: 1

Views: 752

Answers (3)

Victor Xie
Victor Xie

Reputation: 148

geocodezip is right,

the point is parsing the string to an array of google.maps.LatLng, and use it as paths in polygon option while you create it.

if you need to load the points in a dynamic logic, you can set the path later.

    var oNewPolygon = new google.maps.Polygon(polygonOptions);
    oNewPolygon.setMap(this.m_oMap);
    /*... ... ....
    'dynamic logics of loading polygon path
    'and parsing the string to polygonpaths(array of google.maps.LatLng)
    .......... draw the map.........*/
    oNewPolygon.setPaths(polygonpaths);

Upvotes: 0

geocodezip
geocodezip

Reputation: 161384

Parse the string into google.maps.LatLng objects, use those for the path of the google.maps.Polygon.

var geometry = "(55.595892233825545, 12.663964033126831),(55.595486072831385, 12.66323447227478),(55.5953284569849, 12.665669918060303),(55.59621352237994, 12.664951086044312)";
// Get rid of outside ().
geometry = geometry.substring(1, geometry.length - 1); 
// remove extra spaces
var coordStr = geometry.replace(/,\s/g,","); 
var coordsArray = coordStr.split("),(");
var path = [];
for (var i=0; i<coordsArray.length;i++) {
   var coords = coordsArray[i].split(",");
   var pt = new google.maps.LatLng(
   parseFloat(coords[0]),
   parseFloat(coords[1]));
   path.push(pt);
}
var polygon = new google.maps.Polygon({
   paths: path,
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#FF0000',
   fillOpacity: 0.35
});

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 geometry = "(55.595892233825545, 12.663964033126831),(55.595486072831385, 12.66323447227478),(55.5953284569849, 12.665669918060303),(55.59621352237994, 12.664951086044312)";
  // Get rid of outside ().
  geometry = geometry.substring(1, geometry.length - 1);
  // remove extra spaces
  var coordStr = geometry.replace(/,\s/g, ",");
  var coordsArray = coordStr.split("),(");
  var path = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < coordsArray.length; i++) {
    var coords = coordsArray[i].split(",");
    var pt = new google.maps.LatLng(
      parseFloat(coords[0]),
      parseFloat(coords[1]));
    path.push(pt);
    bounds.extend(pt)
  }
  map.fitBounds(bounds);
  var polygon = new google.maps.Polygon({
    paths: path,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Upvotes: 2

Nina Scholz
Nina Scholz

Reputation: 386786

Maybe this helps, according to this information.

The solution gets all numbers and reassembles them to an array with point objects.

function getCoords(string) {
    var coords = [];
    string.match(/[\d.]+/g).map(Number).forEach(function (a, i) {
        if (i % 2) {
            coords[coords.length - 1].lng = a;
        } else {
            coords.push({ lat: a });
        }
    });
    return coords;
}

var geometry = "(55.595892233825545, 12.663964033126831),(55.595486072831385, 12.66323447227478),(55.5953284569849, 12.665669918060303),(55.59621352237994, 12.664951086044312)",
    coords = getCoords(geometry),
    polygon = /* new google.maps.Polygon( */ {
        paths: coords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    } /* ) */;

document.write('<pre>' + JSON.stringify(polygon, 0, 4) + '</pre>');

Upvotes: 1

Related Questions