google.maps.places.PlacesService avec nearbySearch

**bronon** · 09/02/2015, 10h31

Bonjour à tous,
Ce matin je bute sur le Pb suivant.
je veux mettre en place un affichage de proximité avec google.maps.places.PlacesService ==> nearbySearch, j'ai utilisé le tuto de Google qui fonctionne très bien lorsqu'on utilise des LatLng en nombre mais plante (aucun affichage) dès que j'utilise des variables JS issues de "google.maps.Geocoder()".
Si qq peux mettre sur une piste d'avance merci.
Mon code (celui de Google adapté par mes soins) :

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
77
<!DOCTYPE html>
<html>
  <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
var map;
var infowindow;
var latitude, longitude, Ville = 'vannes';
 
function initialize() {
	var geocoder = new google.maps.Geocoder(), latitude, longitude, service;
 
		geocoder.geocode( { 'address': Ville}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			latitude = results[0].geometry.location.lat();
			longitude = results[0].geometry.location.lng();
		alert(latitude+" • "+longitude);
		} 
	}); 
 
  var pyrmont = new google.maps.LatLng(latitude, longitude);
//  var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
 
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: pyrmont,
    zoom: 15
  });
 
  var request = {
    location: pyrmont,
    radius: 500,
    types: ['store']
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}
 
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}
 
function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
 
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

**mathieu** · 10/02/2015, 11h24

le problème est que les variables latitude et longitude sont mises à jour de façon asynchrone, après que l'appel de geocoder.geocode et la suite ait été exécuté.

pour récupérer les informations dans le bon ordre, tu peux faire ça par exemple

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
 
function initialize() {
    var geocoder = new google.maps.Geocoder();
 
    geocoder.geocode( { 'address': Ville}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            miseAjourCarte(results[0].geometry.location);
        } 
    });
}
 
function miseAjourCarte(location)
{
    var pyrmont = location;
    //  var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
 
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: pyrmont,
        zoom: 15
    });
 
    var request = {
        location: pyrmont,
        radius: 500,
        types: ['store']
    };
 
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
}

**bronon** · 10/02/2015, 15h45

Ah ouai classe !
C'est tout de suite plus performant quand on s'adresse à un pro !
1 000 000 000 merci !
Cdlt
[MàJ] Maintenant le pb est la récupération des « places » en français.
Quand je renseigne « store » dans « types » les affichages sont +/- corrects mais dès que je renseigne « boulangerie » je n'ai plus aucun résultats.
Si j'utilise https://www.google.fr/maps/place/14+.../data=..?hl=fr la recherche de proximité est correcte voire excessive !
Donc comment faire une recherche de proximité en français ? Grrrr.
D'avance merci pour des pistes

**mathieu** · 10/02/2015, 17h31

lis bien la documentation :
https://developers.google.com/maps/d...earch_requests

pour le paramètre "type" on ne peux pas mettre ce qu'on veut, la liste est indiquée dans la documentation

(P.S. hors-sujet : il y a une jolie concentration de boulangeries et de pizzérias à Vannes, il va falloir que j'aille visiter tout ça un jour

)

**bronon** · 10/02/2015, 18h44

Merci pour ta réponse et ton humour !

J'ai trouvé mon bonheur avec « service.radarSearch », seul pb qui subsiste une erreur dont je n'arrive pas à me débarrasser.
dans « function createMarkerProxy » il m'indique toujours « ReferenceError: Can't find variable: infoWindow » alors qu'elle a été définie précédemment ! Grrrr
Si qqu'un à une piste d'avance merci !
Mon code complet :

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
function rechercheProxy() {
	cible = Adresse1+", "+Ville+", France";
	var geocoder = new google.maps.Geocoder();
 
    geocoder.geocode( { 'address': cible}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            miseAjourCarte(results[0].geometry.location);
        } 
    });
}
function miseAjourCarte(location) {
    var pyrmont = location;
    map = new google.maps.Map(document.getElementById('map'), {
        center: pyrmont,
        zoom: 15
    });
 
    var request = {
        location: pyrmont,
        radius: 500,
        types: ['boulangerie']
    };
 
    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(map);
// 	service.nearbySearch(request, callbackProxy);
	google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
}
 
function performSearch() {
  var request = {
    bounds: map.getBounds(),
    keyword: 'boulangerie'
  };
  service.radarSearch(request, callbackProxy);
}
 
function callbackProxy(results, status) {
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    nbre = parseInt(results.length);
	createMarkerProxy(result);
  }
}
 
 
function createMarkerProxy(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: {
      // Star
      path: 'M 0,-24 6,-7 24,-7 10,4 15,21 0,11 -15,21 -10,4 -24,-7 -6,-7 z',
      fillColor: '#ffff00',
      fillOpacity: 1,
      scale: 1/4,
      strokeColor: '#bd8d2c',
      strokeWeight: 1
    }
  });
	google.maps.event.addListener(marker, 'click', function() {
		service.getDetails(place, function(result, status) {
			if (status != google.maps.places.PlacesServiceStatus.OK) {
				alert(status);
				return;
			}
		infoWindow.setContent(result.name);
		infoWindow.open(map, marker);
		});
	});
}

**mathieu** · 10/02/2015, 21h40

tu utilises parfois "infowindow" et parfois "infoWindow".
il s'agit de 2 variables différentes si tu changes une lettre en majuscule

**bronon** · 10/02/2015, 23h18

Oups désolé pour cette innattention
Pour le coup 1 000 000 000 excuses !
Bonne soirée
[MàJ] Question subsidiaire, sans vraiment d'importance, saurais-tu comment filtrer les résultats de radar search.
J'obtiens brut de décoffrage par ex pour boulangerie tous ce qui comporte le nom boulangerie ou boulanger, ce qui fait que dans ma recherche sur Vannes je trouve un cabinet d'avocats dont un des associés s'appelle Boulanger ce qui est très loin de la recherche initiale.
J'ai attentivement lu la doc Google (https://developers.google.com/maps/d...ails_responses), je n'ai trouvé rien de ce que je cherchais.
Si qqu'un passe par là et une piste d'avance merci !

**NoSmoking** · 11/02/2015, 20h11

Bonjour,
pour commencer je me pose quand même la question de pourquoi faire un Geocoder au chargement alors que rien n'est plus simple que de connaitre les coordonnées de la ville de Vannes, tu l'obtiens d'ailleurs dans ta requête, cela te ferais gagner une requête et un temps de latence.

Concernant ta question subsidiaire il te suffit de regarder la réponse, mais cela me semble surprenant qu'il te retourne un cabinet d'avocats si tu utilises un types : 'bakery'.

**bronon** · 12/02/2015, 11h38

Merci, pour ta réponse mais type n'est pas pris en compte avec radarSearch uniquement avec localSearch

Cdlt

[MàJ] Oups je corrige ma précédente réponse.
Ce lien explique parfaitement l'exhaustivité des détails d'une recherche google et il y a faire !
https://developers.google.com/maps/d...ails_responses

google.maps.places.PlacesService avec nearbySearch [Google Maps]

APIs Google

Discussions similaires

Partager

Partager