Buonasera, sono nuovo di questo forum. Vi spiego la mia situazione:
Ho una pagina web con una select, popolata mediante una query ad un database, che mi fa scegliere un dispositivo.
Quando seleziono un indice della select richiamo una funzione javascript che, oltre ad aggiornare una casella di testo col nome del proprietario del telefono (chiamando una funzione ajax), dovrebbe fare un'altra chiamata ad un'altra funzione ajax aggiungendo dei marker ad una mappa google leggendo le di latitudine e longitudine da un database.
Il problema è che io dichiaro la mappa nel head e la funzione ajax nel body e però ajax non mi riconosce la mappa... come posso fare? Posto qui il codice della pagina principale.
Vi prego di aiutarmi perchè mi servirebbe per la tesina :crying:
Ho una pagina web con una select, popolata mediante una query ad un database, che mi fa scegliere un dispositivo.
Quando seleziono un indice della select richiamo una funzione javascript che, oltre ad aggiornare una casella di testo col nome del proprietario del telefono (chiamando una funzione ajax), dovrebbe fare un'altra chiamata ad un'altra funzione ajax aggiungendo dei marker ad una mappa google leggendo le di latitudine e longitudine da un database.
Il problema è che io dichiaro la mappa nel head e la funzione ajax nel body e però ajax non mi riconosce la mappa... come posso fare? Posto qui il codice della pagina principale.
Codice:
<html>
<head>
<title>Visualizzazione Dati</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="mapstyle.css" media="screen"/>
<?php
function cercaUtente($codiceutente){
if($codiceutente==-1)
return "Utente non loggato";;
include "connect.php";
$sql = "SELECT * FROM utenti WHERE codiceaccesso='".$codiceutente."';";
$risultato = $mysqli->query($sql);
if($row = $risultato->fetch_array())
return "Loggato come: ".$row['cognome']." ".$row['nome'];
else{
return "Utente non loggato";
}
}
?>
<script src="https://maps.googleapis.com/maps/api/js?key=..."
type="text/javascript"></script>
<script type="text/javascript">
var map;
function inizializza(){
var coordinate= new google.maps.LatLng(37.60762761720038,15.167312622070312);
var opzioni ={
zoom: 12,
center: coordinate,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),opzioni);
google.maps.event.addListener(map,'click',function(event){
document.getElementById('lat').value=event.latLng.lat();
document.getElementById('lng').value=event.latLng.lng();
});
}
function aggiungimarker(par1,par2,par3){
var coordinate1= new google.maps.LatLng(par1,par2);
var stringa= par3;
var immagine = {
url: 'marker.png',
size: new google.maps.Size(20,32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0,32),
}
var infowindow = new google.maps.InfoWindow({
content: stringa,
position: coordinate1
});
var marker = new google.maps.Marker({
position: coordinate1,
map: map,
icon = immagine
});
google.maps.event.addListener(marker,'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="inizializza()">
<?php
session_start();
if (!isset($_SESSION['codice'])){
$codiceutente = -1;
}else{
$codiceutente = $_SESSION['codice'];
}
if($codiceutente==-1){
echo("<br>Non autorizzato!\n");
echo("<br><br><a href=\"javascript:history.back();\">Torna indietro<br></a>\n");
exit;
}
echo("<div class=\"main\">\n");
echo("<h3> Visualizzazione Dati dei Dispositivi </h3><br><br>\n");
echo("<div class=\"after\">\n");
echo(cercaUtente($codiceutente)."\n");
echo("<ul>\n");
echo("<li><div class=\"sinistra\">Latitudine: \n");
echo("<input type=\"text\" id=\"lat\" readonly=\"readonly\"/></div>\n");
echo("<div class=\"destra\">Longitudine: \n");
echo("<input type=\"text\" id=\"lng\" readonly=\"readonly\"/></div></li>\n");
echo("<li><br><div class=\"sinistra\">Dispositivo Scelto: <select size=\"1\" tabindex=\"1\" id=\"disp\" name=\"disp\" onChange=\"aggiorna(this)\">\n");
echo("<option value='0'selected=\"selected\">Scegli un dispositivo..</option>\n");
include "connect.php";
$sql = "SELECT * FROM dispositivi;";
$risultato = $mysqli->query($sql);
while($row = $risultato->fetch_array())
echo("<option value='".$row['codiceIMEI']."-".$row['codiceFiscale']."'>".$row['nome']."</option>\n");
echo("</select></div>\n");
echo("<div class=\"destra\">Proprietario: \n");
echo("<input type=\"text\" id=\"prop\" readonly=\"readonly\"/></div></li>\n");
echo("</ul></div>\n");
echo("<div class=\"map\" id=\"map\"/>\n");
echo("</div>\n");
?>
<script type="text/javascript">
function aggiorna(sel){
var disp = document.getElementById('disp');
var prop = document.getElementById('prop');
var valoreselect = disp.options[disp.selectedIndex].value;
$.ajax({
url:"proprietario.php?dispositivo="+valoreselect,
type: "GET",
success:function(result){
prop.value=result;
},
error: function(){
}
});
$.ajax({
url:"dispositivo.php?dispositivo="+valoreselect,
type: "GET",
success:function(result){
var posizione;
var arrayPosizioni = result.split( '!');
for (var i = 0; i <arrayPosizioni.length-1; i++){
posizione = arrayPosizioni[i].split('|');
aggiungimarker(posizione[0],posizione[1],posizione[2]);
}
},
error: function(){
}
});
}
</script>
</body>
</html>Vi prego di aiutarmi perchè mi servirebbe per la tesina :crying: