Untitled

<script src="../../build/index.js"></script>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 8
            });

            var pieData = { values: [1000, 100], colors: ['red', 'blue'], radius: 48, stroke: 4 };

            const _icon = {
                url: 'data:image/svg+xml;charset=UTF-8,' + svgCharts().generatePieChartSVG(pieData.values, pieData.colors, pieData.radius, pieData.stroke)
            }

            var marker = new google.maps.Marker({
                position: { lat: -34.397, lng: 150.644 },
                map: map,
                title: 'Hello World!',
                icon: _icon
            });
        }
    </script>

<?php
     $connect = mysqli_connect("localhost", "root", "", "testing");
     $query = "SELECT gender, count(*) as number FROM tbl_employee GROUP BY gender";
     $result = mysqli_query($connect, $query);
     ?>

    <!DOCTYPE html>
    <html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
    </head>

    <body>
        <div id="map"></div>
        <script src="../../build/index.js"></script>
        <script>
            var map;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: { lat: -34.397, lng: 150.644 },
                    zoom: 8
                });

                var pieData = {(values: ['Gender', 'Number'],
                <?php
                              while($row = mysqli_fetch_array($result))
                              {
                                   echo "['".$row["gender"]."', ".$row["number"]."],";
                              }
                              ?>  , colors: ['red', 'blue'], radius: 48, stroke: 4 };

                const _icon = {
                    url: 'data:image/svg+xml;charset=UTF-8,' + svgCharts().generatePieChartSVG(pieData.values, pieData.colors, pieData.radius, pieData.stroke)}
          var marker = new google.maps.Marker({
                position: { lat: -34.397, lng: 150.644 },
                map: map,
                title: 'Hello World!',
                icon: _icon
            });
        }
    </script>
    <script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDpqCIveYDxUXYmQcQvA-qfxmiEGjb6g4g&callback=initMap' async
        defer></script>
</body>
</html>