I’m trying to create a table that displays the selected data from the json file. With the coordinates data selected from the json file, i need to make the coodinates data into a button so i can setZoom() to the map when the corresponded coordinated is clicked. I am able to make the button work when is not in the table. but now i am struggling to make it work in the table. I have no idea how to make it work. Please help me it will be a very big help to me. Thanks :slight_smile:
here is my html code:
<div class="col-12 form-group mt-5">
<div class="card" style="box-shadow: 0 0 8px rgb(0, 0, 0, 0.3)">
<h6 class="text-muted text-center p-3 mt-2">Map</h6>
<div class="card-body">
<div id="googleMap" style="width: 100%; height: 400px"></div>
</div>
</div>
</div>
<div id="numbers" class="data_btn"></div>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-stripped" id="events_table">
<thead>
<tr>
<th>ROBOT ID</th>
<th>ps</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
here is my js code
<script>
function myMap() {
var mapProp = {
position: new google.maps.LatLng(32.735316, -117.149046),
zoom: 1,
};
var map = new google.maps.Map(
document.getElementById("googleMap"),
mapProp
);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY=myMap"></script>
<script>
$.getJSON("example.json", function (data) {
const map = new google.maps.Map(document.getElementById("googleMap"), {
zoom: 5,
center: new google.maps.LatLng(
1.5298600000000002,
110.36003000000001
),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var output = "";
const { tracks } = data;
$.each(tracks, function (key, value) {
const NewlatLngStr = value.ps.split(",");
const results = document.getElementById("numbers");
function ZoomAndCenter(NewlatLngStr) {
map.setCenter(
new google.maps.LatLng(NewlatLngStr[0], NewlatLngStr[1])
);
map.setZoom(20);
}
const btn = document.createElement("button");
const Questions = NewlatLngStr;
btn.textContent = NewlatLngStr;
btn.addEventListener("click", () => ZoomAndCenter(Questions));
results.appendChild(btn);
console.log(btn);
output += "<tbody>";
output += "<tr>";
output += "<td>" + value.Robotid + "</td>";
output += "<td>" + btn + "</td>";
output += "</tr>";
output += "</tbody>";
});
$("#events_table").html(output);
});
</script>
here is how my json file data look like
{
"result": 0,
"location": {
"walk": null
},
"tracks": [
{ "Robotid": "123456789", "ps": "1.5298600000000002,110.36003000000001" },
{ "Robotid": "123456789", "ps": "1.52872, 110.36453" },
{ "Robotid": "123456789", "ps": "1.5278, 110.36775000000002" },
{ "Robotid": "123456789", "ps": "1.5273500000000002, 110.37160000000002" }
]
}