Multiple Polygons on Google Maps - not working,treat as a single. Using JSP

Question

First of all I would like to say that, there are several same kind of post, but at the end of the day I cannot able to find out solution, like,

Multiple Polygons on Google Maps - not working - joining up Multiple Polygon On Map Drawing Multiple Polygons on Google Maps API v3 from MySQL database

Here is my code of JS

<script>

    // This example creates a simple polygon representing the Bermuda Triangle.
    // Note that the code specifies only three LatLng coordinates for the
    // polygon. The API automatically draws a
    // stroke connecting the last LatLng back to the first LatLng.

    function initialize() {

        var polygons    =   [];
        var polyCoords  =   [];

        var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(22.978624, 87.747803)                    
        };

        <% 
        String[] companyLatLong=new String[polutionList.size()];

            for(int i=0;i<polutionList.size();i++){
                companyLatLong[i]   =   polutionList.get(i).getLatLong();
            }
                for(int k=0;k<companyLatLong.length;k++){
                    String multiLatLong[]   =   companyLatLong[k].split(",");
                    for(int j=0;j<multiLatLong.length;j++){
                        String latLong[]        =   multiLatLong[j].split(" ");
                        double lat              =   Double.parseDouble(latLong[0]);
                        double longi            =   Double.parseDouble(latLong[1]);
        %>

                polyCoords.push(new google.maps.LatLng(<%= lat%>, <%= longi%>));




          var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);


          polygons.push(new google.maps.Polygon({
                paths: polyCoords,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            }));
        <%
          }}
          %> 

          polygons[polygons.length-1].setMap(map);

        }

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

</script>


<div id="map-canvas" style="width:500x;height:550px;"></div>

Where polutionList is a array list of data. At present the outcome is

enter image description here

Please help me out. I am an Android Developer, this is very new for me.

score 0 · Accepted Answer · answered Apr 10 '15 at 07:40

I have solved this, I will need to declare polygons array separately for each time,e.g., need to create polygons array within loop. See my answer-

<script>


    function initialize() {

        var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(22.978624, 87.747803)                    
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
        <% 
            for(int i=0;i<polutionList.size();i++){
                String companyLatLong   =   polutionList.get(i).getLatLong();

                    String multiLatLong[]   =   companyLatLong.split(",");%>
                    var polyCoords  =   [];

                    <%for(int j=0;j<multiLatLong.length;j++){
                        String latLong[]        =   multiLatLong[j].split(" ");
                        double lat              =   Double.parseDouble(latLong[0]);
                        double longi            =   Double.parseDouble(latLong[1]);
                    %>

                polyCoords.push(new google.maps.LatLng(<%= lat%>, <%= longi%>));

                    <%
                      }
                    %> 


                var polygons =new google.maps.Polygon({
                        paths: polyCoords,
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35
                    });
                  polygons.setMap(map);
        <%
        }
        %>

    }

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

</script>

Multiple Polygons on Google Maps - not working,treat as a single. Using JSP

1 Answers1