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 latituda, longituda FROM information";

$result = mysqli_query($conn,$sql);
 $rows = array();

 $result = mysqli_query($conn,$sql);

$result = $conn->query($sql);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = array(

"longituda" => $row['longituda'],
"latituda" => $row['latituda']
);
}
$query=json_encode($data);
//print_r($marks);exit;
return $query;
}
$locations = get_all_locations();
//print_r($locations);exit;

 /*
while($r = mysqli_fetch_assoc($result)) {
        $rows[] = $r;

    echo $r;
}
}
get_all_locations(); */
$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>


    /*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 marks = '<?php echo $locations ?>';
alert(JSON.stringify(marks));


// var ar = JSON.parse(<?php echo $markers?>);
function coordinate(x, y,a,b,c) {
    this.x = x;
    this.y = y;
    this.a = a;
    this.b = b;
    this.c = c;
}
var a = 2;
var arr = new Array();
arr.push(new coordinate(41.9973,21.4280, 7, 5 , 25));
arr.push(new coordinate(41.5129 , 20.9525,7, 5 , 25));
arr.push(new coordinate(42.0069 , 20.9715,7, 5 , 25));
function myMap() {

        var latlng = new google.maps.LatLng( parseFloat(marks['latituda']), parseFloat(marks['longituda']) );
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };

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

      function bindInfoWindow(marker, map, infowindow, html, html2) {
    marker.addListener('click', function() {
        infowindow.setContent(html, html2);
        infowindow.open(map, this);
    });
}
for (var i = 0 ; i< arr.length; i++){
    var selector = arr[i];
    var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Latituda:</b>' +  arr[i].x + '</br>' +
      '<b>Longituda:</b> ' +    arr[i].y + '</br>' +
       '<b>Ph:</b> ' +    arr[i].a + '</br>' +
        '<b>Orp:</b> ' +    arr[i].y + '</br>' +
         '<b>Temperatura:</b> ' +    arr[i].y + '</br>' +
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';
      var infowindow = new google.maps.InfoWindow();
  marker = new google.maps.Marker({
   position: new google.maps.LatLng( arr[i].x, arr[i].y ),
     map: map  });

     google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(arr[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
 //bindInfoWindow(marker, map, infowindow, selector[0],selector[1]);
}

}


    </script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTpqagEkb37XfET0LDs5phyXY8Ri4oNn8&callback=myMap"></script>
<footer> Project Purity</footer>
</body>
</html>