Discussion :

[doudoubens]

Bonjour à tous,

je suis entrain de travailler sur un moteur de recherche en utilisant lucene et je souhaite afficher le résultat d'une requête sur google map.

j'ai déjà créer le champs de recherche (javascript) sur ma page et le résultat de la recherche est une liste de noms et de coordonnées géographique (récupéré depuis la base de donnée ) que j'affiche pour le moment sur la console(sysout).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[lieu1, 44.50669, -69.797974, lieu2, 43.18355, -85.892945, lieu3, 40.616904, -74.094129]

Je souhaite donc afficher mon résultat sur google Map mais j'ai besoin de conseils pour cela ou bien des exemples si possible.
J'ai du mal à passer du résultat obtenue dans le servlet à google map.

Merci

[NoSmoking]

Bonjour,
si il s'agit d'un ARRAY alors un lecture en boucle en récupérant les différents éléments permet de créer les marqueurs.

[doudoubens]

Bonjour,
merci pour ta réponse.
j'ai réussi à ordonner le résultat de la requête dans mon servlet en utilisant gson comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
response.getWriter().write(gson.toJson(array).toString());
 
 
{"myArrayList":[
{"name":"lieu 1","latitude":"44.50669","longitude":"-69.797974"},
{"name":"lieu 2","latitude":"43.18355","longitude":"-85.892945"},
{"name":"lieu 3","latitude":"40.616904","longitude":"-74.094129"}
]}

Mon souci c'est que je ne trouve pas d'exemple pour passer cette structure json dans google map. Je sais qu'il faut utiliser Ajax (pour récupérer les données suite à une requête dans un formulaire ) mais je ne sais pas comment procéder...

[NoSmoking]

un lien qui s'approche de la démarche
http://www.developpez.net/forums/d10...e/#post5834702

[doudoubens]

Merci nosmoking.

Je détailles un peu plus mon problème.

je souhaite en fait accéder tout d'abord a ces données qui sont envoyé par un servlet qui s'occupe de traiter la requête de l'utilisateur ( depuis un formulaire ) et renvoi une liste de données comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
{"myArrayList":[
				{
				"name":"lieu1",
				"latitude":"44.50669",
				"longitude":"-69.797974"
				},
				{
				"name":"lieu2",
				"latitude":"43.18355",
				"longitude":"-85.892945"
				},
				{
				"name":"lieu3",
				"latitude":"40.616904",
				"longitude":"-74.094129"
				}
]}

Comment procéder avec Ajax et jquery pour accéder a ces données la ( renvoyé par le servlet) depuis ma page html.

Formulaire est comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
<form id="myform" method="get" action="/InputSearch">
	<input type=text align="middle" size=51 name=query_value
				id="query_value" >
 
	<p style="text-align: center;">
	<input  type="submit" align="middle" size=13 value="Search ">
			</p>
		</form>

/InputSearch étant mon servlet qui effectue le traitement de la requête et renvoi le résultat avec json:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
public  void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {
 
                response.setContentType("application/json");
		response.setCharacterEncoding("UTF-8");
		response.setHeader("Cache-Control", "no-cache");
 (....................traitement .........)
               response.getWriter().write(gson.toJson(array).toString());

[NoSmoking]

je ne visualise pas bien le schéma...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
Coté Client
-> page HTML
  -> FORMULAIRE
    -> SAISIE utilisateur
      -> SOUMISSION FORMULAIRE

Coté Serveur
-> RECEPTION et TRAITEMENT Requête ( servlet )
  -> RENVOI data JSON ??????????

- tu recharges la page ou tu utilises la technique AJAX ?
- quel type de données sont transmises au serveur, car il existe des méthodes de geocode dans l'API Google Map

[doudoubens]

C'est bien ce schéma la.

l'utilisateur entre un "string" dans le formulaire. Le serveur reçoit ce "string" , et grâce au moteur de recherche lucene va envoyer le résultat voulu ( ici une liste de caméras avec leur coordonnées).

Donc La requête de l'utilisateur est envoyé au serveur ( au servlet ) qui renvoi une liste sous format "Json" comme je l'ai décris plus haut.

je suis entrain de travailler sur un projet existant (avec plusieurs pages html) et qui utilise jquery. La page s'affiche comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
$(document).ready(function() {
$.get('/menu.jsp', {      //servlet qui renvoi toutes les pages html
			selected : "ma_page_avec_formulaire.html"
		}, function(data) {
			$('#navigation').html(data);
 
		});
}

[NoSmoking]

si tu utilises AJAX, il ne faut pas soumettre via ton formulaire, qui lui forcera le rechargement de ta page.

en AJAX récupérer les datas au format JSON, voir même XML, surtout avec jQuery, ne semble pourtant pas un problème!

[doudoubens]

si tu utilises AJAX, il ne faut pas soumettre via ton formulaire, qui lui forcera le rechargement de ta page.

en AJAX récupérer les datas au format JSON, voir même XML, surtout avec jQuery, ne semble pourtant pas un problème!

Je dois lui soumettre le "submit" ?
comment faire ceci ?

j'ai essayé ceci mais ca ne fonctionne pas ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 function requestServlet(){
		  $("input#getcameralist").submit(function() {
	 	var urlStr="http://localhost:22001/InputSearch"; //lien vers le servlet ;je pense que cet appel n'est pas correct
	 	var myjson= $.getJSON(urlStr, function() {
		  alert("test");
		})
 
	      $.ajax({
	     type:"GET",
	     url:urlStr,
	     data:myjson,
	     dataType: "json",
	     success: callback});
		  });
 
	     }
	  function callback(jsonObj)
	  {
	  var str = jsonObj;
 
	    var obj = JSON.parse(str);
	     alert ("success")
	      alert(obj[0].latitude);
	     }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<form id="myform" method="get" action="#" onclick="return requestServlet;">
			<input type=text align="middle" size=51 name=query_value
				id="query_value">
 
			<p style="text-align: center;">
				<input id="getcameralist" type="submit" align="middle"
					 size=13 value="Search a virtual sensor">
			</p>
		</form>

[NoSmoking]

il te suffit d'avoir ces 2 éléments, hors FORM

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type=text id="query_value">
<button onclick = "requestServlet();">Rechercher</button>

et dans ta fonction requestServlet(), tu récupères la query_value pour transmission.

[doudoubens]

Merci pour ton aide.

[doudoubens]

j'ai finalement procéder autrement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
var xmlHttp;
 
 
function startRequest(){
	alert("call function OK"); //affichage ok
	createXmlHttpRequest();
 
var u1=document.getElementById("query_value").value;
	alert(u1); //affichage de ce que j'ai tappé dans le champs input OK
 
xmlHttp.open("GET","http://localhost:22001/InputSearch?query_value="+u1 ,true);
xmlHttp.setRequestHeader("Content-type", "application/json");
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
 
function createXmlHttpRequest()
{
	alert("appel createXMLHTTPRequest"); //affichage OK
    if(window.ActiveXObject){
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 
 else if(window.XMLHttpRequest)
 {
     xmlHttp=new XMLHttpRequest();
  }
 
}
 
function handleStateChange()
{
 
	if (xmlHttp.readyState == 4 && xmlHttp.status == 200|| xmlHttp.status == 0){ 
		var json = eval('(' + xmlHttp.responseText + ')');
		alert(json.myArrayList[0].name);  //  OK
		alert(json.myArrayList[0].latitude);  //  OK
		alert(json.myArrayList[0].longitude);  //  OK
 
	  }
    }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
form id="myform" ></form>
		<input type=text align="middle" size=51 name="query_value"
			id="query_value">
		<p style="text-align: center;">
				<button id="getcameralist" align="middle" size=13 onclick = "startRequest();">Search a virtual sensor</button>
		</p>

L'affichage fonctionne maintenant je dois assigner chaque latitude , longitude à ma carte google map ... pour afficher pour chaque lieu un marqueur et avoir un zoom adapté

[NoSmoking]

j'ai finalement procéder autrement :

abandon de jQuery donc!
cela aurait donné un truc du style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function requestServlet(){
  var valeur = "query_value=" +$("query_value").val();
  $.ajax({
    url: "http://nom_du_site/InputSearch",
    dataType: 'json',
    data : valeur,
    success : function( data){
      $.each(data, function( key, val){
        // faire ce qu'il y a a faire
      });
     }
  });
}

mais pas un spécialiste, loin s'en faut, donc à confirmer sur le forum jQuery

Pour l'affichage une boucle devrait suffire en javascript traditonnel!