Below there is my code of “home.php”. I want insert some values associated to an address, put them (find and put also the latitude and longitude of the address inserted from the user) in a database and in the map with a marker.
The problem is that when codeaddress() execute, it stops exactly before geocoder.geocode({'address': address},function(results, status) {..} and I’m not able to have the latitude and logitude to put in my database, and in the map there isn’t the marker.
If I remove the line <form action="home.php" method="post" width="300px" height="300px"> (and of course the part of insertinDb() because now I haven’t any $_POST value) codeaddress() works, and I have the marker and latitude and longitude values.
If I remove the call to codeaddress(), insertinDB() works (of course without insert lat and lng values).
Where am I wrong?Please ask me if something is not clear in the question.
<!DOCTYPE html>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<HTML>
<HEAD>
<script type="text/javascript" src="jquery.js"></script>
<META NAME="GENERATOR" Content="AlterVista - Editor HTML">
<title>LowPricePetrol</title>
<link rel="stylesheet" type="text/css" href="homeformat.css"/>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/PRIVATEKEY=true">
</script>
<script type="text/javascript">
var geocoder;
var map;
var lat_;
var lng_;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.92, 12.93);
var mapOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function codeAddress() {
var contentString = '<div id="content">'+
'<h2 id="firstHeading" class="firstHeading">' + document.getElementById("nome").value + '</h2>'+
'<div id="bodyContent"><u>Indirizzo</u>: ' + document.getElementById("indirizzo").value + ' ' + document.getElementById("civico").value +'<br><u>Citta</u>: '+ document.getElementById("citta").value
+ '<br><u>Paese</u>: ' + document.getElementById("paese").value + '<br><u>Prezzo Benzina</u>: ' + document.getElementById("prezzoB").value + ' (euro/litro)</div>' +
'<u>Prezzo Diesel</u>: ' + document.getElementById("prezzoD").value +
' (euro/litro)</div>'+
'</div>';
var image = '/img/'+ document.getElementById("nome").value +'.png';
var infowindow = new google.maps.InfoWindow({content: contentString});
var ind2_map = document.getElementById("indirizzo").value;
var civ_map = document.getElementById("civico").value;
var cit2_map = document.getElementById("citta").value;
var pae2_map = document.getElementById("paese").value;
var address = ind2_map + " " + civ_map + ", " + cit2_map + ", "+ pae2_map ;
alert(address);
geocoder.geocode({'address': address},function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
alert(results[0].geometry.location);
lat_ =results[0].geometry.location.lat();
alert(lat_);
lng_ =results[0].geometry.location.lng();
alert(lng_);
document.getElementById('lat').value = lat_;
document.getElementById('lng').value = lng_;
var marker = new google.maps.Marker({
map: map,
icon:image,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
<?php
function insertInDb() {
$database = mysql_connect( CONNECTION DB);
if (!$database) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("NAME DB", $database);
$sql="INSERT INTO Dati(NomeLuogo, Indirizzo, Citta, Paese, PrezzoB, PrezzoD, Lat, Lng)
VALUES
('$_POST[nome]','$_POST[indirizzo]','$_POST[citta]','$_POST[paese]','$_POST[prezzoB]', '$_POST[prezzoD]', '$_POST[lat]', '$_POST[lng]')";
if (!mysql_query($sql,$database)) {
die('Error: ' . mysql_error());
}
mysql_close($database);
}
?>
<script type="text/javascript">
function check_form(){
var check_n = document.getElementById("nome").value;
var check_i = document.getElementById("indirizzo").value;
var check_civ = document.getElementById("civico").value;
var check_cit = document.getElementById("citta").value;
var check_pa = document.getElementById("paese").value;
var check_prb = document.getElementById("prezzoB").value;
var check_prd = document.getElementById("prezzoD").value;
if(check_n == "" || check_i == "" || check_cit == "" || check_pa == "" || (check_prb == "" && check_prd == "") )
alert("Tutti i campi con asterisco sono obbligatori (almeno un prezzo va inserito)");
else{
codeAddress();
}
}
</script>
</HEAD>
<BODY onload="initialize();">
<div class="titlebox" style="center">
<img src="/img/Logo.png" alt="LowPricePetrol_Logo" width="700" height="150" align=%u201Dcenter%u201D />
</div>
<?php
if(isset($_POST["nome"]))
insertInDb();
?>
<div class="insertbox" style="center">
<br/>
<form action="home.php" method="post" width="300px" height="300px">
AGGIUNGI LA TUA SEGNALAZIONE
<br/>
<label for="nome">Seleziona il gestore:</label><br/>
<select id="nome" name="nome">
<option value="" selected="selected">-- seleziona --</option>
<option value="Eni" id="Eni">Eni</option>
<option value="Esso" id="Esso">Esso</option>
<option value="Ip" id="Ip">Ip</option>
<option value="Q8" id="Q8">Q8</option>
<option value="Tamoil" id="Tamoil">Tamoil</option>
<option value="Total" id="Total">Total</option>
</select><br/>
Indirizzo: <br/>
<input type="text" name="indirizzo" id="indirizzo"/> <br/>
Civico: <br/>
<input type="text" size="4" name="civico" id="civico"/> <br/>
Città: <br/>
<input type="text" name="citta" id="citta"/> <br/>
Paese: <br/>
<input type="text" name="paese" id="paese"/> <br/>
Prezzo benzina (euro/litro): <br/>
<input type="text" name="prezzoB" size="5" id="prezzoB"/> <br/>
Prezzo diesel (euro/litro): <br/>
<input type="text" name="prezzoD" size="5" id="prezzoD"/> <br/>
<input type="text" id="lat" name="lat"></input>
<input type="text" id="lng" name="lng"></input>
<br/>
<input type="submit" name="invia" onclick="check_form()"/>
</form>
</div>
<div class="mapbox" id="map_canvas" style="width:700px; height:350px" ></div>
</BODY>
</HTML>
Geocoding is async function. You getting redirected to home page before it gets result. You should submit form after data is received.
To achieve this goal you can change
to
and
to
and add
document.sform.submitto the end of yourif (status == google.maps.GeocoderStatus.OK) {part of code.