Q:

Control view of Multi polygon in Google map

We have multipolygon WKT. We have no issue to draw all of them in Google map.
Below are the codes. The only issue is that we want only the first polygon to be visible but the rest to transparent. How to control on that? Any idea please?
function drawPoly(data, pl) {
    var pointsData = data.split(",");
    var cords = [];

    // iterate over each points data and create a latlong
    // & add it to the cords array
    var len = pointsData.length;
    for (var i = 0; i < len; i++) {
        var xy = pointsData[i].split(" ");

        var pt = new google.maps.LatLng(xy[1], xy[0]);
        cords.push(pt);
    }

    // now add it to the map
    // Construct the polygon
    alert("I=" + pl);
    var polygonFirst = "";
    if (pl == 0) {
        var polygon1 = new google.maps.Polygon({
            paths : cords,
            strokeColor : '#1E90FF',
            strokeOpacity : 0.8,
            strokeWeight : 2,
            fillColor : '#1E90FF',
            fillOpacity : 0.35,
            zIndex : 1
        });
        // polygon1.setMap(map);
    } else {
        var polygon2 = new google.maps.Polygon({
            paths : cords,
            strokeColor : '#1122AA',
            strokeOpacity : 1,
            strokeWeight : 2,
            zIndex : 1
        });
        // polygon2.setZIndex(1);
        polygon2.setMap(map);
    }

}

A:

I have just put together the following function. I hope it will help you! It return an array of the polylines contained in the multipolygon with the first styled to your requirements. Please let me know if this was useful to you! p.s.: You will have to set the map property of the polylines later, as the resulting polylines do not have their map property set to your map in my code.
<!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==0){
            toReturn.push(new google.maps.Polygon({
                                                paths: line,
                                                strokeColor: '#FF00FF',
                                                strokeOpacity: 0,
                                                strokeWeight: 6,
                                                fillColor: '#1E90FF',
                                                fillOpacity: 0,
                                                zIndex:1                                                        
            }));
        }
        else if(k>0)
        {
            toReturn.push(
                new google.maps.Polygon({
                                                paths: line,
                                                strokeColor: '#1122AA',
                                                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(47, 19),
            zoom:6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var mps = ["MULTIPOLYGON((4 47,19.1 50.1,18.1 60,4 47),(3.9 46.9,28.5 46.5,5 30,3.9 46.9))", "MULTIPOLYGON((50 57,20.1 47.1,1 1,50 57),(11.9 46.9,31.5 46.5,50 1,11.9 46.9))"];
        for(i in mps){
            var lines = drawPoly(mps[i].replace("MULTIPOLYGON",""));
            for(k=0;k<lines.length;k++){
                lines[k].setMap(map);
            }
            lines.length = 0;
        }                           
     });
    </script>
            </head>
            <body>
                <div style="height:600px;width:600px;" id="map"></div>
            </body>
            </html>

