Discussion :

[Atom87]

Bonjour;

Je travaille actuellement sur l'api google map et sur Place autocomplete address form :https://developers.google.com/maps/d...te-addressform

Voici mon bout de form :

Code :

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

1
2
3
4
    <div class="form-group">
      <%= f.label 'Enter your Address' %>
      <%= f.text_field :address, :class => 'form-control', :placeholder => 'Enter your address', :id => 'autocomplete', :onFocus=> "geolocate()" %>
    </div>

Désolé mais le code est en Rails...

J'ai modifié le code js pour le faire correspondre a mon form....et la error : Uncaught ReferenceError: geolocate is not defined

Et je ne comprends pas l'erreur...

Cordialement

[Diablo_22]

Bonjour,

as tu inclus tous les fichiers nécessaire.?

[Atom87]

Bonne question, sur la page d'exemple de l'api google, je ne vois aucun fichier insérer...

[Diablo_22]

Montre nous ta partie JS modifié .

[Atom87]

Je n'ai pas modifié grand chose a part le tableau du nom des champs des formulaires...

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
        var placeSearch, autocomplete;
        var componentForm = {
          address: 'long_name',
          postal_code: 'short_name',
          city: 'long_name',
        };
 
        function initAutocomplete() {
 
          autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')),{types: ['geocode']});
 
          autocomplete.addListener('place_changed', fillInAddress);
        }
 
        function fillInAddress() {
 
          var place = autocomplete.getPlace();
 
          for (var component in componentForm) {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
          }
 
          for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
              var val = place.address_components[i][componentForm[addressType]];
              document.getElementById(addressType).value = val;
            }
          }
        }
 
        function geolocate() {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
              };
              var circle = new google.maps.Circle({
                center: geolocation,
                radius: position.coords.accuracy
              });
              autocomplete.setBounds(circle.getBounds());
            });
          }
        }

Le code de l'api marche bien dans un fichier a part

[Diablo_22]

Dans ton HTML avant la balise

Code :

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

</body>

as-tu inclus ce script :

Code :

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

1
2
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initAutocomplete"
        async defer></script>

[Atom87]

Pourquoi aurais-je besoin de ce script ? vu qu'il marche parfaitement sans dans un fichier a part ( ou j'ai fait un copier coller du code google map api)

[Atom87]

Oups je n'avais pas vue la fin du code...résolu merci ^^

[Diablo_22]

Je t'en prie. N'oubliez pas la balise

Resolue