[Résolu]Javascript /Json / Api google map

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 ..
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 un conflit de variable
essaye

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

Modifié par JENCAL (21 Apr 2015 - 14:23)

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
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
		 });
 	 
})	
 })

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)

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 ! <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 [/i]