Bonjour à tous,
Je travaille avec cakephp2.4.5. Après plusieurs jours de recherche, je n'arrive pas à utiliser Adresspicker.
MAIS HéHé!!!
J'ai une solution qui le copie et qui est calquée dessus (enfin pas pour tout).
J'ai suivi ce tutoriel.
Je l'ai adapté comme suit:
Ma vue account_essai

<!-- main.css = .ui-autocomplete dans toutouille.css -->
<?php echo $this->Html->script('http://maps.google.com/maps/api/js?sensor=false', array('inline' => false)); ?>
<?php echo $this->Html->script('addresspicker/js/jquery-1.10.2.js', array('inline' => false)); ?>
<?php echo $this->Html->script('addresspicker/js/jquery-ui-1.10.4.custom.min.js', array('inline' => false)); ?>
<?php echo $this->Html->script('addresspicker/js/main.js', array('inline' => false)); ?>

    <label>Address: </label><input id="address" type="text"/>
    <div id="map_canvas" style="width:300px; height:300px"></div><br/>
    <label>latitude: </label><input id="latitude" type="text" disabled=disabled> <br/>
    <label>longitude: </label><input id="longitude" type="text" disabled=disabled> <br/>

Mon controller:

<!--app/Controller/UsersController.php-->
<?php
App::uses('AppController','Controller');
class UsersController extends AppController{
    public function account_essai(){// Qui pour l'instant ne fait rien
    }
}

Mon main.js

//Useful links:
// http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
// http://code.google.com/apis/maps/documentation/javascript/services.html#Geocoding
// http://jqueryui.com/demos/autocomplete/#remote-with-cache

var geocoder;
var map;
var marker;

function initialize(){
//MAP
  var latlng = new google.maps.LatLng(41.659,-4.714);
  var options = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), options);

  //GEOCODER
  geocoder = new google.maps.Geocoder();

  marker = new google.maps.Marker({
    map: map,
    draggable: true
  });

}

$(document).ready(function() { 

  initialize();

  $(function() {
    $("#address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label: item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {
        $("#latitude").val(ui.item.latitude);
        $("#longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);
      }
    });
  });

  //Add listener to marker for reverse geocoding
  google.maps.event.addListener(marker, 'drag', function() {
    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          $('#address').val(results[0].formatted_address);
          $('#latitude').val(marker.getPosition().lat());
          $('#longitude').val(marker.getPosition().lng());
        }
      }
    });
  });

});

J'obtiens bien l'adresse demandée du type 49 rue des pruneaux, 47000 Agens, France (dans mon input id="address) et la longitude et latitude dans:

<label>latitude: </label><input id="latitude" type="text" disabled=disabled> <br/>
    <label>longitude: </label><input id="longitude" type="text" disabled=disabled> <br/>

Tout ça marche. Maintenant je voudrais récupérer l'adresse, le code postal, le département et la région et du coup le pays dans des inputs différents (comme pour la longitude et la latitude)

Là je coince comment m'y prendre. Il va de soit que les champs input seront:

<label>Adresse 1: </label><input id="route_1" type="text" disabled=disabled> <br/>
<label>adresse 2: </label><input id="route_2" type="text" disabled=disabled> <br/>

Pour coller au mieux à adressepicker

<label>Code postal: </label><input id="postal_code" type="text" disabled=disabled> <br/>
<label>Ville: </label><input id="locality" type="text" disabled=disabled> <br/>
<label>Département: </label><input id="administrative_area_level_1" type="text" disabled=disabled> <br/>
<label>Région: </label><input id="administrative_area_level_2" type="text" disabled=disabled> <br/>
<label>Pays: </label><input id="country" type="text" disabled=disabled> <br/>

Si vous avez une idée elle sera très bien venue.

5 réponses


Vallyan
Réponse acceptée

Nan mais ce que je voulais dire c'ést que le JSON que te retourne l'API de google contient déja tout ca en détail, y a qu'a parser et mettre dans tes inputs.
Ce code (j'ai pris une adresse bidon) te montre comment je récupère le détail des infos et les log dans la console. Ce sera pas dif' de l'inclure dans ton script après la ligne 66 de ton main.js:

$(document).ready(function(){
    var lat = 48.8577964;
    var lng = 2.3581662;
    $.getJSON( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=true", function( data ) {
        console.log(data);
        var bldgNum = data.results[0].address_components[0].long_name;
        var streetName  = data.results[0].address_components[1].long_name;
        var department  = data.results[0].address_components[5].long_name;
        var zip = data.results[0].address_components[7].long_name;
        var city = data.results[0].address_components[3].long_name;
        var country = data.results[0].address_components[6].long_name;
        console.log(bldgNum);
        console.log(streetName);
        console.log(department);
        console.log(zip);
        console.log(city);
        console.log(country);
    });
});
amethyste
Réponse acceptée

Je comprends pas bien, tu utilises le plugin adresspicker ou pas ? Si Oui, tu dois renseigner l'objet "elements"

elements: {
      lat: "#lat",
      lng: "#lng",
      street_number: '#street_number',
      route: '#route',
      locality: '#locality',
      administrative_area_level_2: '#administrative_area_level_2',
      administrative_area_level_1: '#administrative_area_level_1',
      country: '#country',
      postal_code: '#postal_code', // ex <input id="postal_code">
      type: '#type' 
    }
mimosa21
Auteur

Merci Vallyan, je sais que je doit me servir de maps.googleapis, car mon tuto c'est servi de ça. Maintenant c'est comment mettre ça en forme dans mon main.js pour que cela fonctionne?

mimosa21
Auteur

Merci à tous les deux,
J'utilise du coup Adressepicker sur l'une de mes vues et ce petit code sur une autre que j'avais laissé de côté.