CODEWITHSUNDEEP
phpjavascriptdatabasegoogle-maps
user1938352
user1938352

Reputation:

I want a map with values inserted from the user and that values on a database

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>

Upvotes: 2

Views: 1236

Answers (1)

Sergey Shcherbin
Sergey Shcherbin

Reputation: 401

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 

<input type="submit" name="invia"  onclick="check_form()"/>`

to 

<input type="button" name="invia"  onclick="check_form()"/>

and

<form action="home.php" method="post" width="300px" height="300px">

to 

<form action="home.php" method="post" width="300px" height="300px" name='sform'>

and add document.sform.submit to the end of your if (status == google.maps.GeocoderStatus.OK) { part of code.

Upvotes: 1

Related Questions