CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
user1670642
user1670642

Reputation: 121

Polygon array does not work in Google map API

I have a code that draw polygon from array in google map api but it does not work

<!DOCTYPE html>
 <html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
    function drawPoly(multipolygonWKT) {
        var polylines = [];
        var toReturn = [];

        var formattedValues = multipolygonWKT.replace("))", "");
        formattedValues = formattedValues.replace("((", "");


        var linesCoords = formattedValues.split("),(");



        for (i = 0; i < linesCoords.length; i++) {
            polylines[i] = [];
            var singleLine = linesCoords[i].split(",");

            for (j = 0; j < singleLine.length; j++) {
                var coordinates = singleLine[j].split(" ");
                var latlng = new google.maps.LatLng(parseFloat(coordinates[1]), parseFloat(coordinates[0]));

                polylines[i].push(latlng);

            }
        }

        //by now you should have the polylines array filled with arrays that hold the coordinates of the polylines of the multipolyline
        //lets loop thru this array

        for (k = 0; k < polylines.length; k++) {
            var line = polylines[k];
          if (k > -1) {
                toReturn.push(
            new google.maps.Polygon({
                paths: line,
                strokeColor: 'red',
                strokeOpacity: 1,
                strokeWeight: 2,
                zIndex: 1
            })
        );
            }
        }
        return toReturn;
    }


    $(document).ready(function () {
        var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(24.886436490787712, 70.2685546875),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        debugger;
        var mps = ["MULTIPOLYGON(((25 80.1,18.4 66.1,32.3 64.7,25.7 80.1)),(25.1 80.5,18.8 66.1,32.9 64.2,25.1 80.5))"];
        for (i in mps) {
            var lines = drawPoly(mps[i].replace("MULTIPOLYGON", ""));
            for (k = 0; k < lines.length; k++) {
                lines[k].setMap(map);
                google.maps.event.addListener(lines[k], 'mouseover', function () {
                    this.setOptions({ fillColor: "red" });
                });
                google.maps.event.addListener(lines[k], 'mouseout', function () {
                    this.setOptions({ fillColor: "white" });

                });
            }
            lines.length = 0;
        }
    });
</script>
        </head>
        <body>
            <div style="height:1000px;width:1200px;" id="map"></div>
        </body>
        </html>

this code work here by this lat lon this but not work whis my lat lon

Upvotes: 0

Views: 2020

Answers (1)

geocodezip
geocodezip

Reputation: 161334

You have the latitude and longitude reversed in the WKT representation. That should be "Longitude Latitude":

Change this:

var mps = ["MULTIPOLYGON(((25 80.1,18.4 66.1,32.3 64.7,25.7 80.1)),(25.1 80.5,18.8 66.1,32.9 64.2,25.1 80.5))"];

To:

var mps = ["MULTIPOLYGON(((80.1 25,66.1 18.4,64.7 32.3,80.1 25.7),(80.5 25.1,66.1 18.8,64.2 32.9,80.5 25.1)))"];

Working fiddle

Upvotes: 1

Related Questions