Generate dynamic KML and load it with Maps API

Hi all i have task to create monitoring of 200 ip addresses and for each of this ip we have location latitude/longitude. Now for the monitoring purpose i have perl script runing which pings all 200hosts and update their status in MySql database.

Now i want to display these 200 locations on google maps and change marker color depending on status Green = online, Red = offline.

Also i have loaded kml fille with location of the connections and street cabling ( This is fixed and no changes are needed )

How can i generate markers dynamically and display them all together with already loaded kml fille?

Or if there is any other solution i am willing to consider it.

Here is a sample where i am loading my kml fille:

<!DOCTYPE html>
<html>
<head>
    <title>KML Layers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=MY API&callback=initMap&libraries=&v=weekly"
        defer
    ></script>
    <style type="text/css">
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        "use strict";

        function initMap() {
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: {
                    lat: 35.928926,
                    lng: 14.462688
                }
            });
            const ctaLayer = new google.maps.KmlLayer({
                url: "MY KML ADDRESS",
                map: map
            });
        }
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html>
<head>
    <title>KML Layers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=MY API&callback=initMap&libraries=&v=weekly"
        defer
    ></script>
    <style type="text/css">
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 100%;
        }
​
        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        "use strict";
​
        function initMap() {
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: {
                    lat: 35.928926,
                    lng: 14.462688
                }
            });
            const ctaLayer = new google.maps.KmlLayer({
                url: "MY KML ADDRESS",
                map: map
            });
        }
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>
​

Answer

I ended up using MySql to Maps

Advertisement

Answer