Google map multiple polygons

#1

First post.
I admit I am a novice Javascript programmer.
C yes, PHP yes, but not JS.
I am creating a Google map with polygons (several) via php select lat, lng from items... to var mypoly = new google.maps.Polygon... points1 ...
I can get it to work if I create an array points1 and points2.
But I can have 20+ polygons (and at other times 10 or 7 or 18 - where the php select where condition.
To create points1 thru points20 is going to make the code bulky and look like ****
I’ve tried var points[][]; and a for (i= loop with points[i] and all I end up with is a blank screen.
Any help you can give please.

#2

OK. Got it to work. Is there a cleaner way to do the following?
var points = [[ ],[ ],[ ],[ ],[ ],[ ],[ ],[ ],[ ],[ ],[ ],[… 30+

#3

llget.php is a script that does "select lat, lng from DB. echo “$r1[0], $r1[1]|” (thats a pipe).

Friends of Black Forest
#4

Here’s my working code. I’m sure there is much better out there, but …

Developments in and around our area, CO #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } 
    <body>
    <div id="map"></div>
    <script>

    // In our area there are several large developments. 8 houses, 200 houses, 
    // 6000 houses.  This program draws a polygon of the area in question
    // as stored in a mysql db (areaID, Seqno, lat, lng, zoom)

    var addListenersOnPolygon = function (polygon) {
    google.maps.event.addListener (polygon, 'mouseover', function (event) {
            var id = polygon.indexID;
            var t2 = aname[id]
            var an = t2.split (",");
            var contentString = "<a href=" + an[0] + " target=_blank>" + an[1] + "</a>";
            if ( an[1].length > 0 )
            {
               infoWindow.setContent (contentString);
               infoWindow.setPosition (event.latLng);
               infoWindow.open (map);
            }
    });  
    google.maps.event.addListener(polygon, 'mouseout', function() {
            infoWindow.close (map);
    });
    }

    var aname = [];
    // really dont like this but havent been able to get anthing else to work
    var myPoly = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]];
    var points = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]];
    var map;

    function initMap () {
            var server = window.location.hostname;
            var n=1; 
            var req = new XMLHttpRequest ();
            // llget.php - sql - select latlng from where order by
            req.open ('GET', 'https://' + server + '/maps/llget.php', false);
            req.send (null);
            // t1 = lat1,lng1|lat2,lng2|lat3,lng3|...
            var t1 = req.responseText;
            var t2 = t1.split ("|");
            minlat = 0; maxlat = 90;
            minlng = 0; maxlng = -180;

            // fill array points
            for (var i=0; i<t2.length; i++)
            {
                    var l1 = t2[i].split (",");
                    points[n].push  (new google.maps.LatLng ( l1[0], l1[1] ));
                    // figure poly center
                    if (l1[0] > minlat) { minlat = l1[0]; }  if (l1[0] < maxlat) { maxlat = l1[0]; }
                    if (l1[1] < minlng) { minlng = l1[1]; }  if (l1[1] > maxlng) { maxlng = l1[1]; }
            }

            var clat = (parseFloat(minlat) + parseFloat(maxlat))/2;
            var clng = (parseFloat(minlng) + parseFloat(maxlng))/2;
            // calc center of poly on map
            var myLatlng = new google.maps.LatLng ( clat, clng );

            var req = new XMLHttpRequest ();
            // z2get.php - sql - select zoom from where
            req.open ('GET', 'https://' + server + '/maps/z2get.php?z2=' + n, false);
            req.send (null);
            var t1 = req.responseText;
            var myzoom = Number (t1);

            var req = new XMLHttpRequest();
            // extlink.php - sql - select http.link from where
            // when clicked display a jpeg of the subdivision
            req.open('GET', 'https://' + server + '/maps/extlink.php?z2=' + n, false);
            req.send(null);
            var t1 = req.responseText;
            aname[n] = t1;

            map = new google.maps.Map(document.getElementById('map'), {
                    zoom: myzoom, center: myLatlng, mapTypeId: 'satellite'
            });

            var myPoly = new google.maps.Polygon({
                    paths: points[n],
                    strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2,
                    fillColor: '#FF0000', fillOpacity: 0.8, indexID: n });
                    myPoly.setMap(map);
                    addListenersOnPolygon(myPoly);
                    infoWindow = new google.maps.InfoWindow;
            }
            </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJIp1h_UCr74fIIhA3m4LWyxAk_Le7zpk &callback=initMap&view=satellite">
    </script>
#5