lokasi.html

<!DOCTYPE html>
<html> 
<head>

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2M.Zw1T" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

</head>
<body ng-app="myApp">

<div ng-include="'navbar.html'">
</div>

  <div class="container mt-5">
    <h2>Daftar alamat warung</h2> 
    <div  ng-controller="customersCtrl">
    	<table>
            <tr>
                <th>No</th>
                <th>Latitude</th>
                <th>Longtitude</th>
                <th>Alamat</th>

            </tr>
            <tr ng-repeat="x in names">
                <td>{{ x.id }}</td>
    	         <td>{{ x.latitude }}</td>
               <td>{{ x.longtitude }}</td>
               <td>{{ x.alamat}}</td>
    	    </tr>
    	</table>
    </div>
  </div>

  <div class="container mt-4">
    <div id="googleMap" style="width:100%;height:400px;"></div>
  </div>
 
</body>

<footer>

  <div class="container mt-n5"> 
    <h4 class="text-center">Copyright</h4>
  </div>

</footer>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
   $http.get("http://localhost/angular-test/index.php?action=getAllLokasi")
   .then(function (response) {$scope.names = response.data;});

});

function myMap() {
var mapProp= { 
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:10,
};

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

}


</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJKPutHwUu38cex2pApve5YhnGoWjL8IM&callback=myMap"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>