Intégrer les suggestions d'adresses

**domino313131** · 11/05/2011, 10h01

bonjour,
je suis entrain de faire un petit site pour trouver des itineraire etje voudrais savoir si il est possible d'integrer dans un inpute text, l'outil de saisie semi automatique comme sur googleMAP pour faciliter la recherche et eviter les adresses inconnus, merci

**NoSmoking** · 12/05/2011, 18h11

Bonjour,
fais une recherche avec comme mot clé auto complétion, et si tu travailles avec jQuery il y a Google Maps dans jQuery qui le prend en compte

**domino313131** · 13/05/2011, 16h56

Envoyé par NoSmoking

Bonjour,
fais une recherche avec comme mot clé auto complétion, et si tu travailles avec jQuery il y a Google Maps dans jQuery qui le prend en compte

merci je vais essayer de voir

**domino313131** · 14/05/2011, 17h21

Envoyé par NoSmoking

Bonjour,
fais une recherche avec comme mot clé auto complétion, et si tu travailles avec jQuery il y a Google Maps dans jQuery qui le prend en compte

en fait, j'ai telechargé un truc sur le lien que tu m'as posé et j'ai trouvé exactement ce que je voulais, un inpute text qui complete une adresse que l'on tape et qui , en plus, cree un marqueur sur cette adresse

etant nul en Jquery et assez debutant en javascript, j'ai essayé de manipuler pour garder seulement le input avec l'autocompletion en supprimant le div de la map mais des que je le fais ça ne marche plus car je supprime aussi le ID, si tu pouvais m'expliquer ( encore ) ; merci

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<html>    
  <head> 
    <script type="text/javascript" src="jquery-1.6.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.12.custom.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="gmap3.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.12.custom.css"/>
    <style>
      *{
        font-family: verdana;
        font-size: 12px;
      }
      body{
        text-align:center;
      }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 1000px;
        height: 500px;
      }
      .ui-menu .ui-menu-item{
        text-align: left;  
        font-weight: normal;
      }
      .ui-menu .ui-menu-item a.ui-state-hover{
        border: 1px solid red; 
        background: #FFBFBF; 
        color: black;
        font-weight:bold;
      }
    </style>
 
    <script type="text/javascript">
      $(function(){
 
          $("#test").gmap3();
 
          $('#address').autocomplete({
            //This bit uses the geocoder to fetch address values
            source: function(request, response) {
              $("#test").gmap3({
                action:'getAddress',
                address: request.term,
                callback:function(results){
                  if (!results) return;
                  response($.map(results, function(item) {
                    return {
                      label:  item.formatted_address,
                      value: item.formatted_address,
                      latLng: item.geometry.location
                    }
                  }));
                }
              });
            },
            //This bit is executed upon selection of an address
            select: function(event, ui) {
              $("#test").gmap3(
                {action:'clear', list:'marker'},
                {action:'addMarker',
                  latLng:ui.item.latLng,
                  map:{center:true}
                }
              );
            }
          });
 
      });
    </script>
  <body>
    <input type="text" id="address" size="60">
    <div id="test" class="gmap3"></div>
  </body>
</html>

**NoSmoking** · 14/05/2011, 18h47

je penses que si tu renseignes correctement les chemins d'accès aux fichiers inclus cela devrait marcher
j'ai essayé avec

Code html :

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

1
2
3
4
5
<script type="text/javascript" src="http://gmap3.net/js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://gmap3.net/js/gmap3-3.2-min.js"></script>
<script type="text/javascript" src="http://gmap3.net/js/jquery-ui-1.8.12.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://gmap3.net/jquery-ui-1.8.12.custom.css"/>

et cela fonctionne parfaitement avec le code que tu as fourni.

**domino313131** · 18/05/2011, 02h06

Envoyé par NoSmoking

je penses que si tu renseignes correctement les chemins d'accès aux fichiers inclus cela devrait marcher
j'ai essayé avec

Code html :

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

1
2
3
4
5
<script type="text/javascript" src="http://gmap3.net/js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://gmap3.net/js/gmap3-3.2-min.js"></script>
<script type="text/javascript" src="http://gmap3.net/js/jquery-ui-1.8.12.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://gmap3.net/jquery-ui-1.8.12.custom.css"/>

et cela fonctionne parfaitement avec le code que tu as fourni.

oui ça marche, mais si j'enleve le

Code :

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

1
2
 
<div id="test" class="gmap3"></div>

la saisie semi automatique ne marche plus

mon but est de faire simplement l'autocompletion donc je veux garder seulement le input text et supprimer la gmap

mci

**NoSmoking** · 19/05/2011, 18h47

mon but est de faire simplement l'autocompletion donc je veux garder seulement le input text et supprimer la gmap

il faut comprendre que dans l'autocomplétion les données affichées proviennent bien de quelque part, l'opération du Saint Esprit n'y peut rien.
Il te faut donc ta gmap3 pour receuillir celles ci, comme indiqué ci dessous

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
$('#address').autocomplete({
  //This bit uses the geocoder to fetch address values
  source: function (request, response) {
    $("#test").gmap3({
      action: 'getAddress',
      address: request.term,
      callback: function (results) {
        if (!results) return;
        response($.map(results, function (item) {
          return {
            label: item.formatted_address,
            value: item.formatted_address,
            latLng: item.geometry.location
          }
        }));
      }
    });

ce que tu peux faire par contre c'est de masquer la carte pour ne pas la voir en lui attribuant une height et une width de 0, le chargement sera sensiblement plus rapide de surcroît.

Intégrer les suggestions d'adresses [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager