I included TomTom map to my php page, and included the TomTom code (javascript) into a separate body tag at the very bottom. I'm noticing that when I include the TomTom script within these tags, none of my buttons (href links) are working.
All of the code is on one sublime text page (map.php).
map.php:
<!--Developer code: https://developer.tomtom.com/blog/build-different/add-tomtom-maps-
website-30-seconds-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Details Page</title>
<link rel="stylesheet" type="text/css" href="https://api.tomtom.com/maps-sdk-for-
web/cdn/5.x/5.41.0/maps/maps.css">
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/maps/maps-web.min.js">.
</script>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/services/services-
web.min.js"></script>
<style>
#map-div {
padding: 60px 60px 60px 60px;
height: 100%;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<ol>
<?php
if (isset($_POST["submit"]));
$search = $_POST['search'];
$navigator = $_POST['navigator'];
$sql = "SELECT DISTINCT stores_name FROM stores ";
$rs_result = mysqli_query($conn, $sql);
$rowCount = mysqli_num_rows($rs_result);
if ($rowCount > 1){
echo "There are " .$rowCount. " results...";
}
else {
echo "These is " .$rowCount. " result...";
}
if ($rowCount > 0) {
while($row = mysqli_fetch_array($rs_result)){
$title = $row['stores_name'];
//$id = $row['stores_id'];
$href = '<a href="details.php?id='. urlencode($title).'">'.$title.'</a>';
}
}
else {
echo "<tr><td>" ."No results found". "</td><td>";
}
?>
</ol>
</body>
<body>
<div id="map-div" name="map-div"></div>
<script>
const API_KEY = 'XXX';
const APPLICATION_NAME = 'My Application';
const APPLICATION_VERSION = '1.0';
tt.setProductInfo(APPLICATION_NAME, APPLICATION_VERSION);
const GOLDEN_GATE_BRIDGE = {lng: -122.47483, lat: 37.80776};
var map = tt.map({
key: API_KEY,
container: 'map-div',
center: GOLDEN_GATE_BRIDGE,
zoom: 12
});
</script>
</body>
</html>