I have this two files:
mappa2.html:
#map { height: 85%; }
</style>
<script>
function showHint() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "sql2.php", true);
xmlhttp.send();
}
</script>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Your app title -->
<title>Moli.se</title>
<!-- Path to Framework7 Library CSS, iOS Theme -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="res/dist/css/framework7.ios.min.css">
<!-- Path to Framework7 color related styles, iOS Theme -->
<link rel="stylesheet" href="res/dist/css/framework7.ios.colors.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body onload="showHint()">
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="open-left-panel">
<img src="img/list.png" />
</a>
</div>
<div class="center"><a href="#"><img src="http://moli.se/wp/wp-content/uploads/2016/03/logo-molipuntose-2016-160.png" height="30"/></a></div>
</div>
</div>
<!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through">
<!-- Page, "data-page" contains page name -->
<div data-page="index" class="page">
<!-- Scrollable page content -->
<div class="page-content">
<div class="card">
<div class="card-header">Mappa</div>
<div class="card-content">
<div class="card-content-inner">
<!--Inzio mappa -->
<div id ="txtHint"></div>
</div>
</div>
</div> </div>
</div></div> </div>
</div>
<div class="panel-overlay"></div>
<!-- Left panel, let it be with reveal effect -->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Benvenuto su Moli.se</p>
<a href="index.html" class="external"> <p>Home</p></a>
<a href="mappa.html" class="external"> <p>Mappa</p></a>
<a href="http://moli.se/blog" class="external"> <p>Blog</p></a> </div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="res/dist/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/moli-se.js"></script>
</body>
</html>
And sql2.php:
<?php
$con = mysqli_connect('*******','******','*****','*************');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT COUNT(*) AS total FROM posti";
$result=mysqli_query($con ,$sql ); $data=mysqli_fetch_assoc($result);
$d = $data['total'];
echo "
<div id='map'></div>";
echo "
<script>
function initMap() {
var uluru = {lat: 42.5 , lng: 14.5 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: uluru
});
var noPoi = [
{
featureType: \"poi\",
stylers: [
{ visibility: \"off\" }
]
}
];
map.setOptions({styles: noPoi});
";
for ($i = 1 ; $i <= $d ; $i++) {
$sel="SELECT * FROM posti WHERE id = '".$i."'";
$res = mysqli_query($con,$sel);
$row = mysqli_fetch_array($res);
echo "
var uluru" .$i . " = {lat: " .$row['latitudine'] .", lng: " .$row['longitudine'] ."};
var contentString" . $i . " = ' <div id=\"content\"><h2> " . $row['name'] . "</h2></div>'
var infowindow" .$i . "= new google.maps.InfoWindow({
content: contentString" . $i . "
});
var marker" . $i . " = new google.maps.Marker({
position: uluru" .$i .",
map: map,
title: 'Title',
icon : 'yellow.png'
});
marker" . $i . ".addListener('click', function() {
infowindow" .$i .".open(map, marker" . $i . ");
});
";
}
echo "
}
</script>
<script async defer
src='https://maps.googleapis.com/maps/api/js?MY_KEY=initMap'>
</script>
";
mysqli_close($con);
?>
If I load mappa2.html, the map doesn't load. But if I copy the generated code and put it in another html file, the map shows up correctly.
If I write in the js console: initMap() it says:
Uncaught ReferenceError: initMap is not defined
at <anonymous>:1:1
