11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour a tous,
je suis actuellement en stage et on me demande de travailler sur un système de recherche dont les résultats doivent être indiqué par des marqueurs sur une map.
j'ai en ma possession les coordonnées des points à placer ce qui me facilite la tache.
j'ai donc un fichier json qui se présente comme suis :
{
    "points": [
        {
            "name": "Pan Africa Market",
            "address": "1521 1st Ave, Seattle, WA",
            "ville": "Seattle",
            "lat": "47.608940",
            "lng": "-122.340141",
            "type": "restaurant"
        },
        {
            "name": "The Melting Pot",
            "address": "14 Mercer St, Seattle, WA",
            "ville": "Seattle",
            "lat": "47.624561",
            "lng": "-122.356445",
            "type": "restaurant"
        },

etc.. (avec la requette sql actuelle il y a 5 résultats dans le json)
et la fonction pour créer les points
  getmyjson(function(data){

	var points = data.points;
	alert("toto");	
	 var point,latLng ;
	 for (i in points){
		 // rentre dans la boucle mais ne prend pas les coord a afficher.
		 
			point=points[i];
			latLng = new google.maps.LatLng(point.lat,point.lng);
			alert("tata");
			 var marker= new google.maps.Marker({
			 position: latLng,
			 map: map,
			 title: point.name
		 });
 	 
	 }
 })

les alerts sont bien présente seulement j'ai beau chercher sur le net je ne vois pas pourquoi les points ne s'affichent pas .. Smiley bawling
Merci d'avance ![/i]
Modifié par Santiana (21 Apr 2015 - 16:26)
Salut


Est ce que tu fais appel a l'API en question justement, dans les balises HEAD dans du html

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
Bonjour!
oui j'ai actuellement une map avec un point placé en "dur" qui sont affiché sur mon site
var map;
function initialize() {
	coord= new google.maps.LatLng(37.773916, -122.415799);
 var mapOptions = {
    zoom: 12,
    center: coord
		};	

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);  
	//Marker Pour le point du centre 
 var marker = new google.maps.Marker({
      position: coord,
      map: map,
      title: 'Hello World!'
  });

}

Ceci affiche la map correctement avec un point sur les coordonnées du centre
peut etre faudrait-il parser ton JSON var


var marker = JSON.parse(data);

marker.points[1].lat 

pour le premier objet
Modifié par JENCAL (21 Apr 2015 - 11:58)
Il ne me semble pas que je puisse modifier marker car la variable sert a créer le point
je viens d'essayer en faisant

var points =  JSON.parse(data);
	alert("toto");	
	
	 var point,latLng ;
	 for (i in points){
		 // rentre dans la boucle mais ne prend pas les coord a afficher.
		 
			//point=points[i];
			latLng = new google.maps.LatLng(points[i].lat ,point[i].lng );
			alert("tata");
		

mais les deux alertes ne se déclenchent plus Smiley confus

ai-je modifié comme tu l'imaginais ?[/i][/i][/i]
Modifié par Santiana (21 Apr 2015 - 12:27)
peut etre un conflit de variable
essaye

var POI =  JSON.parse(data);
alert (POI.points[1].lat);

Modifié par JENCAL (21 Apr 2015 - 14:23)
ca ne marche pas cependant je viens d'essayer de faire
latLng = new google.maps.LatLng(point.lat ,point.lng );
			alert(point.lat);
			alert(point.lng);


et les données s'affichent bien donc les coordonnées sont récupérées mais pas affichées.. Smiley confus
Il faut saisir ton marker

 var marker = new google.maps.Marker({
      position: latLng ,
      map: map,
      title: 'Hello World!'
  });



parce que tu as

 var marker = new google.maps.Marker({
      position: [b]coord[/b],
      map: map,
      title: 'Hello World!'
  });

Modifié par JENCAL (21 Apr 2015 - 14:46)
en fait j'ai un premier point en dur a l'initialisation de la map avec :

	coord= new google.maps.LatLng(47.605821, -122.323546);
 var mapOptions = {
    zoom: 12,
    center: coord
		};	

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);  
	//Marker Pour le point du centre 
 var marker = new google.maps.Marker({
      position: coord,
      map: map,
      title: 'Hello World!'
  }); 


et ensuite je prends les coordonnées JSON avec ca :

 latLng = new google.maps.LatLng(point.lat,point.lng);
			//alert(point.lat);
			//alert(point.lng);
			var marker= new google.maps.Marker({
			 position: latLng,
			 map: map,
			 title: point.name
		 }); 

je n'ai pas bien compris ce que tu voulais dire je pense Smiley decu
Santiana,
j'ai l'impression que tu mélanges tableau et objet Smiley cligne .

Par rapport à ton code original points est une variable de type array
donc tu peux utiliser la fonction forEach;

Tu mélanges également les variables... i.. points ... point...

voilà quelque chose de plus simple qui devrait marcher


data.points.forEach(function(value){
	console.log(value.lat)
})


NB: normalement tu n'as pas besoin de JSON.parse() car data, lui, est déjà un objet.
Modifié par Heillige Leben (21 Apr 2015 - 15:10)
Bonjour Heillige ,

certes le javascript est assez nouveau pour moi ! ahah
que ce soit le consol.log ou l'alerte avec les coordonnées cela marche correctement mon problème c'est que rien ne s'affiche sur ma carte même si les coordonnées sont récupérées Smiley sweatdrop
voila le code modifié :

  getmyjson(function(data){
	alert("toto");	
	//var points = data.points; 			
	//var point ;
	var latLng;
	data.points.forEach(function(value){
	latLng = new google.maps.LatLng(value.lat,value.lng); // On attribue a latLng les coordonnées du JSON
		console.log(value.lat);
		console.log(value.lng);
		//	alert(point.lat); // Affiche bien les coordonées mais ne les affiches pas ..
		//	alert(point.lng);
			var marker= new google.maps.Marker({ // on crée un nouveau marker pour chaques résultats
			 position: latLng, // on lui donne les coordonées de son élements
			 map: map, // on l'applique a la map
			 title: value.name // on lui donne le nom du commerce inclus dans le JSON
		 });
 	 
})	
 })
tester et marche

  <script>
	var points = [
        {
            "name": "Pan Africa Market",
            "address": "1521 1st Ave, Seattle, WA",
            "ville": "Seattle",
            "lat": "47.608940",
            "lng": "-122.340141",
            "type": "restaurant"
        },
        {
            "name": "The Melting Pot",
            "address": "14 Mercer St, Seattle, WA",
            "ville": "Seattle",
            "lat": "47.624561",
            "lng": "-122.356445",
            "type": "restaurant"
        }
];

function initialize() {	
 var map = new google.maps.Map(document.getElementById('map-canvas'), {
      	zoom: 4,
		center: new google.maps.LatLng(47.608940, -122.340141),
	  });
	
  for (var i=0; i<points.length; i++)
  { 
	  var marker = new google.maps.Marker({
		  position: new google.maps.LatLng(points[i.].lat, points[i.].lng),
		  map: map,
		  title: points[i.].name
	  });
	  
  }

}
google.maps.event.addDomListener(window, 'load', initialize);

    </script>


en effet, le parse est inutile ici. j'ai mis des [i.] pour éviter les mots en "italic"
Modifié par JENCAL (21 Apr 2015 - 15:28)
le seul soucis jencal c'est que je dois passer par le fichier json pour les infos, je pense dire une betise mais puis je transformé un json en tableau (il me semble que json est déja un tableau de base) Smiley bawling

j'ai essayer de modifié ton code pour l'adapter au miens sans succès



merci du temps que vous m'accordez au passage
je continue a chercher de mon côté..
j'ai réussi ! Smiley lol <3
mais j'ai honte ahah
mon erreur venais du fait que la fonction de création de marker devait se trouver dans la fonction initialize() du coup il fallait que j'y mette le tout dedans voici le code final !

// fonction qui récupère l'interieur du JSON
var json;
function getmyjson(callback){
	$.getJSON('adresse.json',callback);
}
//initialisation basique google map.
var map;
function initialize() {
	coord= new google.maps.LatLng(47.605821, -122.323546);
 var mapOptions = {
    zoom: 12,
    center: coord
		};	

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);  
	//Marker Pour le point du centre 
 

//Fonction pour afficher les points grace aux coordonnées dans le fichier JSON
  getmyjson(function(data){
	alert("toto");	
	var points = data.points; 			
	var point ; 
	var latLng;
	
	for (i in points){
			point=points[i]; // point prend chaques element du JSON
			coordjson = new google.maps.LatLng(point.lat,point.lng);
				 var marker= new google.maps.Marker({ // on crée un nouveau marker pour chaques résultats
			 position: coordjson , // on lui donne les coordonées de son élements
			 map: map, // on l'applique a la map
			 title: point.name // on lui donne le nom du commerce inclus dans le JSON
		 });
 	 
	 }

 })
}


Merci a vous deux ! bonne continuation Smiley biggrin [/i]