9991 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Autant en php je me débrouille mais alors JS est ma bête noire, pourtant ça se ressemble mais bon... bref.... donc je fais appel aux bonnes âmes qui m'aideront, je l'espère à me dépatouiller !!!
Surement tellement simple pour certains...

Voici mon besoin, j'ai dans ma base de données, la liste des centres que je dois afficher sur la carte. Je souhaite pouvoir afficher le marqueur en fonction de l'adresse postale si les données GPS sont absentes.
J'affiche bien les centres qui ont les coordonnées GPS, par contre les autres NON Smiley bawling
SVP Help Smiley confused

Je me suis servi de la doc google et autres infos trouver sur le web.

merci Smiley langue


      var customLabel = {
        formation: {
          label: 'F'
        },
        centre: {
          label: 'C'
        }
      };

				var geocoder;
        function initMap() {
				
				geocoder = new google.maps.Geocoder();
				
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(43.5296809,5.0933665),
          zoom: 8
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('XMLCentre.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var addresse = markerElem.getAttribute('addresse');
              var ville = markerElem.getAttribute('cp')+' '+markerElem.getAttribute('ville');
              var telephone = markerElem.getAttribute('telephone');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng'))); 
				
		if (!point) {
                  var address = adresse+' '+ville;
		  geocoder.geocode( { 'address': address}, function(results, status) {
			if (status == 'OK') {	
				var point = results[0].geometry.location;
				}
			}); 
		}
							
              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = addresse
              infowincontent.appendChild(text);
              infowincontent.appendChild(document.createElement('br'));
							
							var text = document.createElement('text');
              text.textContent = ville
              infowincontent.appendChild(text);
              infowincontent.appendChild(document.createElement('br'));

              var strong = document.createElement('strong');
							strong.textContent = telephone
              infowincontent.appendChild(strong);
              //infowincontent.appendChild(document.createElement('br'));
              //infowincontent.appendChild(document.createElement('br'));
							
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };
        request.open('GET', url, true);
        request.send(null);
      }
Bonjour,

Le problème pourrait se situer à la ligne "var point = results[0].geometry.location;".

Si tu veux pouvoir utiliser le contenu de la variable "point" à l'extérieur de la fonction dans laquelle il reçoit sa valeur, il ne faut pas mettre "var" car ce mot clé a pour effet de déclarer "point" comme étant une variable locale de la fonction dans laquelle se trouve l'instruction "var point=...", donc non visible à l'extérieure de celle-ci.

Je n'ai pas regardé s'il y avait d'autres problèmes.

Amicalement,
Bonjour Parsimonhi,

Merci pour ta réponse. Mais visiblement il y a autre chose.

Je ne sais pas si les lignes suivantes sont correctes, pour tester la condition j'ai ajouté un alert, mais rien ne s'affiche, mon but étant de vérifier s'il on entre bien dans la condition :

if (!point) {  
  var address = adresse+' '+ville;    alert(address);
  geocoder.geocode( { 'address': address}, function(results, status) {
     if (status == 'OK') {	
        var point = results[0].geometry.location;
     }
  });
}
Bonjour


var point = new google.maps.LatLng(
  parseFloat(markerElem.getAttribute('lat')),
  parseFloat(markerElem.getAttribute('lng'))
); 
				
if (!point) {
  ...
}

Sauf si Google ont fait des trucs bizarre mais normalement point sera toujours casté sur true... (instance d'objet LatLng).

Ton service php devrait te renvoyer l'info que tu récupèrerais du genre:


if (markerElem.getAttribute('noGeoCodeInfos')) {
  
}


ou alors, plus sale, vérifier le contenu de lat et lng...
Modifié par kustolovic (10 Jan 2018 - 17:28)
Bonjour,

Il faut sans doute faire des tests avant dans le code pour déterminer s'il y a ou pas une latitude et une longitude (peut-être avant la ligne var point = new google.maps.LatLng(...)).

Que valent markerElem.getAttribute('lat') et markerElem.getAttribute('lng') quand tu n'as pas ce qu'il faut dans ta base ?

EDIT: je n'avais pas vu la réponse de kustolovic car j'écrivais la mienne. Je suis d'accord avec lui.

Amicalement,
Modifié par parsimonhi (10 Jan 2018 - 17:40)
Ok merci pour vos réponses.

en réponse à parsimonhi
markerElem.getAttribute('lat') et markerElem.getAttribute('lng') valent 0
donc point = null ( j'ai aussi essayé avec if (point == null) )

pour suivre l'idée de kustolovic
j'ai ajouté un attribut dans le XML, si je n'ai pas la latitude alors noLatLng = 1;

dans le js j'ai donc écris

if (markerElem.getAttribute('noLatLng')) {
  var address = adresse+' '+ville;    alert(address);
  ...
}


On est d'accord je dois recevoir une alerte contenant l'adresse si l'attribut "noLatLng" existe ?
(d'autres alert on fonctionnait...)
Quoi que je mette , il n'entre pas dans la condition Smiley ohwell

Y aurait il un problème d'interprétation de condition ?
Y a t-il une autre manière d'écrire une condition ?
Est ce que j'ai la poisse ??? Smiley bawling
MDR!!!!!!!!!!!!!!

Il n'affichait pas l'alert à cause de adresse au lieu de addresse !!!!!!!!!!
dans : var address = adresse+' '+ville;
l'erreur conne... oups!!!! on ne se moque pas hein

bon maintenant que j'arrive jusque là
je teste le reste et vous raconte car je n'ai toujours pas mon point sur la carte... Smiley bawling
jailaforme a écrit :

markerElem.getAttribute('lat') et markerElem.getAttribute('lng') valent 0
donc point = null


Ca m'étonnerait que "point" soit null. Il y a quelque chose au point (0,0) sur Terre, non ? Smiley cligne

Amicalement,
parsimonhi a écrit :


Ca m'étonnerait que "point" soit null. Il y a quelque chose au point (0,0) sur Terre, non ? Smiley cligne

Amicalement,


il est où le trou de souris que je me cache dedans Smiley rolleyes
effectivement, il renvoi (0,0) Smiley lol

par contre "status" indique "REQUEST_DENIED"
j'ai testé l'adresse dans google maps, j'ai bien un retour, une idée ?
jailaforme a écrit :
par contre "status" indique "REQUEST_DENIED"
j'ai testé l'adresse dans google maps, j'ai bien un retour, une idée ?


As-tu activé le service "Google Maps Geocoding API" pour ton projet ?

EDIT: et au passage, il va aussi falloir que tu ajoutes du code dans la fonction function(results, status) {...} car elle est déclenchée de manière asynchrone, ce qui veut dire que la suite du code qui commence à var infowincontent ... peut actuellement être exécutée avant cette fonction. Il faut donc un code ayant cette structure :
function doTheRestHere(){
	var infowincontent...
}

if (markerElem.getAttribute('noLatLng')) {
	var address = adresse+' '+ville;
	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == 'OK') {	
			point = results[0].geometry.location;
			doTheRestHere();
		}
	}); 
}
else doTheRestHere();


Amicalement,
Modifié par parsimonhi (10 Jan 2018 - 20:17)
parsimonhi a écrit :

As-tu activé le service "Google Maps Geocoding API" pour ton projet ?


Effectivement il manquait le service, du coup j'obtiens bien lat et lng manquant.

parsimonhi a écrit :

EDIT: et au passage, il va aussi falloir que tu ajoutes du code dans la fonction function(results, status) {...} car elle est déclenchée de manière asynchrone, ce qui veut dire que la suite du code qui commence à var infowincontent ... peut actuellement être exécutée avant cette fonction. Il faut donc un code ayant cette structure :


MERVEILLEUX !!!!!!!!!!!!!!!!! Smiley langue

alors juste pour infos j'ai bataillé car oublié d'enlever le
var devant : point = results[0].geometry.location;
comme l'avait écrit parsimonhi, et j'ai compris pourquoi !

Smiley lol Smiley lol Smiley lol Smiley lol Smiley lol

Un grand merci à vous deux ça marche NIKEL et j'ai appris plein de nouvelles choses aujourd'hui YOUPI!!!

JS n'est presque plus ma bête noire lol!