I'm creating a Google Maps application. I need to load location data from a database with Ajax, so I can show these data every x seconds. I'm using CodeIgniter/PHP. This is what I got:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
httpCall();
}
function httpCall($http) {
$http({
method: 'GET',
url: '<?php echo site_url('User/marks') ?>',
data: data,
dataType: "json"
})
.success(function (data) {
for (var i = 0, len = markers.length; i < len; ++i) {
var myLatLng = {lat: markers[i].lat, lng: markers[i].lng};
var marker = new google.maps.Marker({
position: {
lat: parseFloat(markers[i].lat),
lng: parseFloat(markers[i].lng)
},
map: map
});
}
})
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
the User/marks function is:
function marks() {
echo json_encode($this->user_model->get_marks());
}
user_model get marks function is:
function get_marks() {
$sql = "select lat,lng
from tbl_locations";
$query = $this->db->query($sql);
$result = $query->result();
return $result;
}
My error is:
ReferenceError: data is not defined
Apparently I pass the data incorrectly, but what is the correct way?
Store your json result in an array
function marks() {
echo json_encode(array('data'=>$this->user_model->get_marks()));
}
and try to print the result of data by using console.log(data) in your ajax result.
That's because you didn't define data variable, which you are passing through data: data,
You have to define it in function httpCall($http) then pass it in ajax function