-1

I generate multiple google maps kml polygon overlays in response to users query and can get the infowindow to launch by clicking on the boundary of the polygon, but can't seem to figure it out how to get it to work by clicking inside the polygon boundary.

Here is example of my code showing output for just two kml files. The file is generated on the fly from a database query, so the actual number of files/layers just depends on the query.

<!DOCTYPE html>

    <html>
        <head>
            <title>
                Multiple KML File Displays
            </title>
        </head>
        <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 1000px;
       width: 800px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 1000px;
       width: 400px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>

    <script>
        var map = null;
        var layers = [];
        var infowindow;

        function initMap() 
        { 
            var lat = 26.59434;
            var long = -98.42500;
            var myLatLng = new google.maps.LatLng(lat,long);
            var myOptions = 
                {
                zoom: 10,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.HYBRID
                }
        map = new google.maps.Map(document.getElementById("map"), myOptions); 




            var bounds
            var infowindow_0 = new google.maps.InfoWindow
                ({
                pixelOffset: new google.maps.Size(100,0),
                });
            function showInContentWindow_0(kmlEvent)
            {
                var content_0="<div>SLGID: 541568_b<br>GRANTEE NAME: Arispe, Mariano (Heirs of)<BR>ABSTRACT: 850<BR>BLOCK: 0<BR>SECTION: 0<BR>ACRES: 22140<BR>PATENTEE NAME: Arispe, Mariano (Heirs)<BR>DISTRICT: Bexar; San Patricio<BR>CLASSIFICATION: San Patricio 1st<BR>FILE NUMBER: 645<BR>PATENTE DATE: 07/19/1881<BR>CERT. NUMBER: 477<br>PATENT VOLUME: 23<BR>PAGE: 952</div>";
                infowindow_0.setPosition(kmlEvent.latLng);
                infowindow_0.setOptions
                    ({
                        pixelOffset: kmlEvent.pixelOffset,
                        content: content_0
                    });
                    infowindow_0.open(map);
            }

        layers[0] = new google.maps.KmlLayer({
            url: 'http://www.logis-us.net/logis/mapping/us/tx/TX_SLG_541568_b.kml',
            preserveViewport: true,
            suppresInfoWindows: true,
            map: map
        });

        google.maps.event.addListener(layers[0],"defaultviewport_changed", function()
        {
            if(!bounds)
                {
                    bounds=layers[0].getDefaultViewport();
                }
            else
                {
                    bounds.union(layers[0].getDefaultViewport());
                }
            map.fitBounds(bounds);
        });

        google.maps.event.addListener(layers[0],"click",showInContentWindow_0);

            var bounds
            var infowindow_1 = new google.maps.InfoWindow
                ({
                pixelOffset: new google.maps.Size(100,0),
                });
            function showInContentWindow_1(kmlEvent)
            {
                var content_1="<div>SLGID: 541668<br>GRANTEE NAME: Vasquez Borrego, Jose<BR>ABSTRACT: 209<BR>BLOCK: 0<BR>SECTION: 0<BR>ACRES: 276350<BR>PATENTEE NAME: <BR>DISTRICT: San Patricio<BR>CLASSIFICATION: San Patricio 1st<BR>FILE NUMBER: 726<BR>PATENTE DATE: <BR>CERT. NUMBER: 0<br>PATENT VOLUME: <BR>PAGE: 206</div>";
                infowindow_1.setPosition(kmlEvent.latLng);
                infowindow_1.setOptions
                    ({
                        pixelOffset: kmlEvent.pixelOffset,
                        content: content_1
                    });
                    infowindow_1.open(map);
            }

        layers[1] = new google.maps.KmlLayer({
            url: 'http://www.logis-us.net/logis/mapping/us/tx/TX_SLG_541668.kml',
            preserveViewport: true,
            suppresInfoWindows: true,
            map: map
        });

        google.maps.event.addListener(layers[1],"defaultviewport_changed", function()
        {
            if(!bounds)
                {
                    bounds=layers[1].getDefaultViewport();
                }
            else
                {
                    bounds.union(layers[1].getDefaultViewport());
                }
            map.fitBounds(bounds);
        });

        google.maps.event.addListener(layers[1],"click",showInContentWindow_1);

     }

   function toggleLayer(i)
    {
        if (layers[i].getMap() === null)
            {
                layers[i].setMap(map);
            }
        else
            {
                layers[i].setMap(null);
            }
    }
   google.maps.event.addDomListener(window,'load',initMap)
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNSzYET9dNja5IgGA_JbzMQ29gZoWwzlQ&callback=initMap">
    </script>
    <body>
    <div id="map"></div>
    <div id="capture"></div>

    </body>
</html>

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.