King Agustin King Agustin - 2 months ago 13
Javascript Question

How to Draw Polygon Array From JSON on Google Maps V3

I have a JSON string which contains polygon array. Can you please let me know how I can update following code to loop and parse the polygons from this WebAPI (JSON). You can find the coordinates of the polygon to "Perimeter" - http://track.asiacom.co.th/fmswebapi/api/zoneinfo

Here are my codes

var url = 'http://track.asiacom.co.th/fmswebapi/api/zoneinfo';

$.getJSON(url, function (zones) {


for (var i = 0; i < zones.length; i++) {

var zone = zones[i];
var name = zone.Name;
var type = zone.Type;
var perimeter = zone.Perimeter;
var company = zone.Company;
var color = zone.Color;


var coords = perimeter.split(",");


pathCoordinates.push(new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1])));


// Construct the polygon.
polygon = new google.maps.Polygon({
path: pathCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});


polygon.setMap(map);




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

infoWindow = new google.maps.InfoWindow();



// Click Zones
google.maps.event.addListener(polygon, 'click', (function (polygon, i) {

return function () {

map.panTo(this.position);

}

})(polygon, i));

}

return zones;

}

)

Answer

It is really necessary that you use with json string or just an example? if not an example your application will fail when another patron comes on the perimeter ... anyway I draw, (you got one Polygono only has 2 points).

Edit: JSBin

$(function () {
initialize();
});
    var url = 'http://track.asiacom.co.th/fmswebapi/api/zoneinfo';
    var pathCoordinates = [];
    var map;

  function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 2,
      center: new google.maps.LatLng(12.473727562827564, 180.55709464999995),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      zoomControl: true
    });
  }




$.getJSON(url, function (zones) {
console.log(zones);

for (var i = 0; i < zones.length; i++) {

    var zone = zones[i];
    var name = zone.Name;
    var type = zone.Type;
    var perimeter = zone.Perimeter;
    var company = zone.Company;
    var color = zone.Color;


    var coords = perimeter.split(" ");
    var recoords;
    for (var k = 0; k < coords.length; k++) {
          recoords = coords[k].split(",");
          pathCoordinates.push(new google.maps.LatLng(parseFloat(recoords[0]), parseFloat(recoords[1])));
    };



    // Construct the polygon.
    polygon = new google.maps.Polygon({
        path: pathCoordinates,
        strokeColor: color,
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: color,
        fillOpacity: 0.35,
        Company: company,
        Name: name,
        map: map
    });

    pathCoordinates = [];
}

    polygon.setMap(map);

});

If you are not using this mode to get the lat / lng and using c # or java look at this thread Return object(markers,polygon,polyline) to javascript from C#

Sorry for my English ;)