Using mySQL, Php and JS, how do I request dans use data I have in my DB?

Question

What i want to do : when a user select a location in a select field, the function newMark() place a marker on a google.maps;

What i achieve by now : Display the map, the select field with all the location saved in my DB.

I have a DB with a table named Step with the columns namePlace, Latitude, Longitude.

Here is the code I have at the moment :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
    <title>Carte dynamique des Itinéraires</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">     

        function initialiser() {
            var latlng = new google.maps.LatLng(46.779231, 6.659431);
            //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
            //de définir des options d'affichage de notre carte
            var options = {
                center: latlng,
                zoom: 3,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            //constructeur de la carte qui prend en paramêtre le conteneur HTML
            //dans lequel la carte doit s'afficher et les options
            var carte = new google.maps.Map(document.getElementById("carte"), options);


        }

        function newMark(lat, lng){
        var mark = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: carte)})
        }
        var sel = document.getElementById("namePlace");


        sel.onchange = function() {
        var lat = this[this.selectedIndex].getAttribute("dtlat");
        var lon = this[this.selectedIndex].getAttribute("dtlon");
        newMark(parseFloat(lat), parseFloat(lon));
        }

    </script>
</head>

<body onload="initialiser()">   
    <div id="carte" style="width:100%; height:100%"></div>
    <div>
    <form>
        <label for="namePlace"><p><u> Nom etape : </p></u></label> 
        <p>
        <select name="namePlace" id="namePlace">
        <option value="">Selectionnez un lieu</option>
        <?php
        include("connexion.php");
        $con = connect_LIF4();
        $req2 = "SELECT * FROM etape";
        $result2 = mysqli_query($con, $req2);
        while ($donnees = mysqli_fetch_array($result2))
        {     
               echo'<option value="'.$donnees['NomLieu'].'" dtlat="'.$donnees['Latitude'].'" dtlon="'.$donnees['Longitude'].'">'.
                $donnees['NomLieu'].'</option>';                
        }
        ?>              
        </select></p>
        </form>
    </div>
</body>

Here is the output code with the solution which add field to html tags :

<!DOCTYPE HTML>
<html>
<head>
    <title>PROJET LIF4</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style1.css" />
        <link rel="stylesheet" href="css/style2.css" />
</head>
<body class="homepage">
        <div id="header-wrapper" class="wrapper">
            <div id="header">
                <nav id="nav">
<ul>
    <li><a href="index.php">Page d'accueil</a></li>
    <li><a href="itineraire.php">Choisir un itineraire</a></li>
    <li><a href="carte.php">Carte</a></li>
    <li><a href="avis.php">Avis</a></li>
</ul>
</nav>
                    <div id="logo">
                        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
    <title>Carte dynamique des Itinéraires</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et
    qu'elle ne peut pas être redimensionnée par l'utilisateur -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Inclusion de l'API Google MAPS -->
    <!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialiser() {
            var latlng = new google.maps.LatLng(46.779231, 6.659431);
            //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
            //de définir des options d'affichage de notre carte
            var options = {
                center: latlng,
                zoom: 3,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            //constructeur de la carte qui prend en paramêtre le conteneur HTML
            //dans lequel la carte doit s'afficher et les options
            var carte = new google.maps.Map(document.getElementById("carte"), options);


        }
        function newMark(lat, lng){
        var mark = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: carte})
        }
        var sel = document.getElementById("namePlace");

        sel.onchange = function() {
        var lat = this[this.selectedIndex].getAttribute("dtlat");
        var lon = this[this.selectedIndex].getAttribute("dtlon");
        newMark(lat, lon);
        }


    </script>
</head>

<body onload="initialiser()">

    <div id="carte" style="width:100%; height:100%"></div>
    <div>
    <form>
        <label for="namePlace"><p><u> Nom etape : </p></u></label> 
        <p>
        <select name="namePlace" id="namePlace">
        <option value="">Selectionnez un lieu</option>
        <option value="Abaine" dtlat=56.9333300 dtlon=26.8500000>Abaine</option><option value="Abu Fanajin" dtlat=30.4327100 dtlon=45.5775200>Abu Fanajin</option><option value="Abu Shanab" dtlat=10.7883300 dtlon=29.5524400>Abu Shanab</option><option value="Adoyevshchina" dtlat=52.2865800 dtlon=46.5031800>Adoyevshchina</option><option value="Agaro" dtlat=15.8333300 dtlon=38.6500000>Agaro</option><option value="Agarsararen" dtlat=7.9500000 dtlon=46.2833300>Agarsararen</option><option value="Agasur" dtlat=10.7185000 dtlon=45.5652000>Agasur</option><option value="Ahl `Arub" dtlat=14.2833300 dtlon=47.0666700>Ahl `Arub</option>               
        </select></p>
        </form>
    </div>
</body>

I tried a lot of thing, like using xmhttprequest, jquery, but it seems i cannot do it right. — Kaendor
– Kaendor, Commented Dec 15, 2014 at 14:41

Verhaeren · Accepted Answer · 2014-12-15 15:49:32Z

3

Are the latitud and longitude in your database also? In that case, you can populated your options with that information too:

EDITED

In your question you posted this line as a result of trying my solution:

<option value="Abaine" dtlat=56.9333300 dtlon=26.8500000>Abaine</option>

That is wrong. As you can see the values are not wrapped by quotes. It should be as I put it in my answer:

<option value="Abaine" dtlat="56.9333300" dtlon="26.8500000">Abaine</option>

Notice now the quotes surrounding the lat and lon values.

Look at the while loop bellow:

while ($donnees = mysqli_fetch_array($result2)) {     
    echo'<option value="'.$donnees['namePlace'].'" dtlat="'.$donnees['Latitude'].'" dtlon="'.$donnees['Longitude'].'">'.
        $donnees['namePlace'].
    '</option>';       
}

HERE: dtlat="'.$donnees['Latitude'].'". Notice the double quotes. And that is assuming that your column names are Latitude and Longitude. Otherwise, just put the right names:

Finally:

And the JS:

var sel = document.getElementById("namePlace");

sel.onchange = function() {
    var lat = this[this.selectedIndex].getAttribute("dtlat");
    var lon = this[this.selectedIndex].getAttribute("dtlon");
    newMark(lat, lon);
}

function newMark(lat, lng){             
    var mark = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: carte});
}

FINAL OBSERVATION:

google.maps function could be waiting for float values and we are sending a string here newMark(lat, lon). In case that doesn't work either, try newMark(parseFloat(lat), parseFloat(lon)).

And the last thing: I find weird this line: position: new google.maps.LatLng(lat, lon),. I didn't realized untill now. It seems that you already instantiated the object google.maps so it should probably be: position: google.maps.LatLng(lat, lon),. But I'm not so sure about that, so keep that in mind just at last resort. Let me know how you're doing it. We'll solve this.

edited Dec 15, 2014 at 15:49

answered Dec 14, 2014 at 23:19

Verhaeren

1,6539 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Verhaeren Over a year ago

@Kaendor I edited my answer. Read untill the last line. You look being close to get this working.

Kaendor Over a year ago

My bad for these quote! I was wondering if i can access the variable "carte" since it's in the initaliser() function. And for your last thing : new google.maps.LatLng(lat, lon), I think it instanciate a LatLng object and not a map object. I'm not sure

Verhaeren Over a year ago

I have no idea what that variable is for. I'll be off for an hour or two and I'll be back. Let me know how it works or you. Cheers.

Kaendor Over a year ago

var carte = new google.maps.Map(document.getElementById("carte"), options); carte is the map, and since it's in another function, i'm wondering if i can have access to it...

Verhaeren Over a year ago

You may update your question being more specific with what you tried and what was the result, etc. I'm willing to help.

|

Dodzi Dzakuma · Accepted Answer · 2014-12-15 22:01:30Z

0

You might be able to try something like this in your while loop.

$lat = $donnees['Latitude'];
$lon = $donnees['Longitude'];
echo "<script type='text/javascript'>newMark('$lat', '$lon');</script>";

You can put it anywhere on the page you might want to call the JavaScript. It is important to make sure that the function is defined somewhere on the page as well.

If you would like to embed this in a button you might want to do the following:

$lat = $donnees['Latitude'];
$lon = $donnees['Longitude'];
echo "<button type='button' onclick='newMark($lat, $lon);'>Click Me</button>";

edited Dec 15, 2014 at 22:01

answered Dec 14, 2014 at 23:14

Dodzi Dzakuma

1,4162 gold badges22 silver badges39 bronze badges

6 Comments

Dodzi Dzakuma Over a year ago

It is important to make sure that you use double quotes to define the outer string and single quotes inside. Otherwise PHP won't parse (interpolate) the variables in the string. However, you still need quotes in the JavaScript as well.

Kaendor Over a year ago

the function is defined, but i can't make this solution work... I tried in the while loop, i was afraid it would mark all the places, but it didn't mark anything.

Dodzi Dzakuma Over a year ago

Can you post the output of the HTML source produced by the PHP script and add it to your question?

Kaendor Over a year ago

I host the website myself, so i don't know it you can have access to the output website.

Kaendor Over a year ago

I did it. But it's currently with the other solution which i prefer since it would put markers when the user select the option.

|

Collectives™ on Stack Overflow

Using mySQL, Php and JS, how do I request dans use data I have in my DB?

2 Answers 2

12 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related