Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width= device-width">

<link rel="stylesheet" href="style.css">


      <?php
    function get_all_locations(){   $dbServername= "localhost";
$dbUsername = "root";
$dbPassword= "";
$dbName= "purities";
$conn= mysqli_connect($dbServername,$dbUsername,$dbPassword,$dbName);
$sql= "SELECT * FROM information";

$result = mysqli_query($conn,$sql);
 $rows = array();
while($r = mysqli_fetch_assoc($sqldata)) {
        $rows[] = $r;


}
}
$markers = json_encode( $locations );

        ?>


<title>Project Purity</title>
</head>
<body>
<header>
<div class="container">
    <div id="branding">
    <h1><span class="highlight">Project Purity</span></h1>
    </div>
    <nav>
    <ul>
    <li class= "current"> <a href="index.html">KRYEFAQJA</a></li>
    <li> <a href="about.html">PËR NE</a></li>
    <li> <a href="bashkpunimi.html">KONTAKT</a></li>


    </ul>
    </nav>
</div>
</header>

<section id="boxes">
<div class="box">
<p > LEGJENDA: </p>
<img src="./img/red.png" style="width:30;height:30px;" >
<h3> I Papijshëm</h3>
</div>
<div class="box"> <img src="./img/orange.png" style="width:30;height:30px;">
<h3>Orta</h3>
</div>

<div class="box">
<img src="./img/green.png" style="width:30;height:30px;">
<h3>I Pastërt</h3>
</div>
</section>

<div id="map" ></div>


<script> function TestMarker() {
           CentralPark = new google.maps.LatLng(42.0069, 20.9715);
           addMarker(CentralPark);</script>

    <script>


    /*parseFloat('<?php echo $lng;?>')*/
    /*

function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng( 42.0069 ,  20.9715),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
        var json=JSON.parse( markers );

        for( var o in json ){

            lat = json[ o ].lat;
            lng=json[ o ].lng;
            name=json[ o ].name;

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat,lng),
                name:name,
                map: map
            });
}
*/

// var ar = JSON.parse(<?php echo $markers?>);

function myMap() {

        var latlng = new google.maps.LatLng(42.0069, 20.9715 );
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };

        var map = new google.maps.Map(document.getElementById("map"),myOptions);


    }


 var locations = <?php get_all_locations() ?>;
    var i ;
        for (i = 0; i < locations.length; i++) {

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });
    </script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTpqagEkb37XfET0LDs5phyXY8Ri4oNn8&callback=myMap"></script>
<footer> Project Purity</footer>
</body>
</html>