Untitled

<html>
    <head>
<link href="location.css" rel="stylesheet" type="text/css" media="screen">

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100vh}
</style>
<script type="text/javascript"
  src=
"http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&libraries=places">
</script>
<?php $servername = "localhost";
$username = "root";
$password = "";
$dbname = "location";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT CellName,Longitude,Latitude  FROM locationdata";
$result = $conn->query($sql);
if ($result->num_rows > 0) {

    // output data of each row
    $table_data;
    $arrayindex=0;
    while($row = $result->fetch_assoc()) {


        $table_data[$arrayindex][0]=$row["CellName"];
        $table_data[$arrayindex][1]=$row["Longitude"];
        $table_data[$arrayindex][2]=$row["Latitude"];
        $arrayindex++;
    }
        //echo $table_data[0][0];

} else {
    echo "0 results";
}
$conn->close();

?>

<script type="text/javascript">
var locations  = <?php echo json_encode( $table_data ) ?>;
var map
  function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(7.9343623,80.2343398),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };

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

    setMarkers(map,locations)

  }

  function setMarkers(map,locations){

      var marker, i

for (i = 0; i < locations.length; i++)
 {

 var cellname = locations[i][0]
 var longi = locations[i][1]
 var lat = locations[i][2]
 //var add =  locations[i][3]

 latlngset = new google.maps.LatLng(lat, longi);

  var marker = new google.maps.Marker({
          map: map, title: cellname , position: latlngset
        });
        map.setCenter(marker.getPosition())


        var content = "cell name: " + cellname

  var infowindow = new google.maps.InfoWindow()

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
        return function() {
           infowindow.setContent(content);
           infowindow.open(map,marker);
        };
    })(marker,content,infowindow));

  }
  }

  </script>


 </head>
 <body onLoad="initialize()">
  <div id="header">
  <form id="searchForm">
     <input type="text" id="searchId"/>
     <script>// Create the search box and link it to the UI element.
        var input = document.getElementById('searchId');
        alert(input);
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var places = searchBox.getPlaces();
        var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            }});</script>
     <button>Go</button>
    </form>
  <ul id="menubar">
        <li> <a href=" 2GLocation.html"><button type="button" class="btn btn-hot text-capitalize btn-xs">3G</a></button></li>
        <li> <a href=" location.php"><button>3G</button></a></li>
   </ul>
    <img id ="searchBtn" src=""/></div>
    <div id="content"><div id="default" style="width:100%; height:100%"></div></div>

 <script> document.write("locations");

 </body>
  </html>