Using mySQL, Php and JS, how can I query dans to use the data I have in my DB?
What I want to do: when the user selects a location in the select box, the newMark () function puts the marker in google.maps;
What I am achieving: Display map, select box with all location saved in my DB.
I have a database table with the name of Step
a column 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 a solution adding the field to the 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>
source to share
Are latitud and longitude in your database? In this case, you can also fill in your parameters with this information:
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>
It is not right. As you can see the values are not wrapped in quotes. It should be like I said in my answer:
<option value="Abaine" dtlat="56.9333300" dtlon="26.8500000">Abaine</option>
Notice the quotes around the lat
and values lon
.
Take a look at the while loop below:
while ($donnees = mysqli_fetch_array($result2)) {
echo'<option value="'.$donnees['namePlace'].'" dtlat="'.$donnees['Latitude'].'" dtlon="'.$donnees['Longitude'].'">'.
$donnees['namePlace'].
'</option>';
}
HERE : dtlat="'.$donnees['Latitude'].'"
. Pay attention to the double quotes. And that assumes that the column names Latitude
and Longitude
. Otherwise, just enter the correct names:
Finally:
And 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
the function could wait for float values, and we send a string here newMark(lat, lon)
. If that doesn't work, try it newMark(parseFloat(lat), parseFloat(lon))
.
Finally, I find it strange that line: position: new google.maps.LatLng(lat, lon),
. I still don't get it. It seems that you have already created an object google.maps
, so it must be: position: google.maps.LatLng(lat, lon),
. But I'm not that sure about that, so keep that in mind as a last resort. Let me know how you do it. We will resolve this.
source to share
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 on any page you might want to call JavaScript. It's important to make sure that the function is also defined somewhere on the page.
If you want to insert this on a button click, you can do the following:
$lat = $donnees['Latitude'];
$lon = $donnees['Longitude'];
echo "<button type='button' onclick='newMark($lat, $lon);'>Click Me</button>";
source to share