Forum : integrer l'api jcDecaux

Bonjour,

Voila je rencontre un petit problème avec mon code.

Je me tourne vers vous car je suis un novice dans le javascript et j'ai un souci.
Je voudrai integrer l'api de jcdecaux dans googlemap.
J'ai suivi les instructions de google et j'arrive a afficher ma map et a mettre des marker lorsque je les rentre manuellement mais je n'arrive pas a les recuperer de l'api de Jcdecaux. Je vous montre mon code.

//API GOOGLE MAP// var map; // Crée un nouveau tableau vide pour tous les marqueurs de liste. var markers = []; function initMap() { //Constructeur crait une nouvelle map- il faut seulement le centre et le zoom. map = new google.maps.Map(document.getElementById('map'), { center:{lat:48.866667 , lng:2.333333 }, zoom:13 }); // Position des endroit a marquer var locations= "https://api.jcdecaux.com/vls/v1/stations?contract=Paris&apiKey=8a21045d07375cf3ca1a9fbd663ca141df365f16"; /*[ {title: 'Tour Eiffel', location: {lat:48.8584 , lng:2.2945}}, {title: 'Arc de Triomphe', location: {lat:48.8738 , lng:2.2959}}, {title: 'Panthéon', location: {lat:48.8467 , lng:2.3464}}, {title: 'Notre Dame', location: {lat:48.8526 , lng:2.3492}}, {title: 'Elysée', location: {lat:48.8708 , lng:2.3169}}, {title: 'Sacré coeur', location: {lat:48.8872 , lng:2.3434}} ];*/ var largeInfowindow = new google.maps.InfoWindow(); var bounds = new google.maps.LatLngBounds(); // Le groupe suivant utilise le tableau d'emplacement pour créer un tableau de marqueurs à l'initialisation. for(var i = 0; i < locations.length; i++) { // Récupère la position du tableau de localisation. var position = locations[i].position; var name = locations[i].name; // Crée un marqueur par emplacement et le place dans le tableau des marqueurs. var marker = new google.maps.Marker({ map: map, position: position, name:name, animation: google.maps.Animation.DROP, id: i }); //Rajoute le marqueur sur notre tableau de marqueurs markers.push(marker); // Étend les limites de la carte pour chaque marqueur bounds.extend(marker.position); // Crée un événement onclick pour ouvrir une infowindow à chaque marqueur. marker.addListener('click',function(){ populateInfoWindow(this, largeInfowindow); }); } map.fitBounds(bounds); } // Cette fonction remplit l'infowindow lorsque le marqueur est cliqué. Nous n'autoriserons que // un infowindow qui s'ouvrira sur le marqueur sur lequel vous avez cliqué // sur cette position de marqueurs. function populateInfoWindow(marker, infowindow) { // Vérifie que l'infowindow n'est pas déjà ouvert sur ce marqueur. if (infowindow.marker !=marker) { infowindow.marker = marker; infowindow.setContent('<div>' + marker.name + '</div>'); infowindow.open(map, marker); // vérifie que la propriété marqueur est effacée si l'infowindow est fermé. infowindow.addEventListener('closeclick',function(){ infowindow.setMarker(null) ; }); } };

Pouvez vous m'aider s'il vous plait?

Salut,
La ce que tu fais, c'est prendre l'adresse de ton API et la mettre dans la variable locations. Si tu veux récupérer le resultat de l'API, il va falloir que tu executes une requête GET. Pour faire ça, regarde du côté de l'objet XMLHttpRequest ou de la methode get de JQuery si tu l'utilises.

Example avec XMLHttpRequest:

function makeRequest(myUrl, callback) { var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) callback(xmlHttp.responseText); } xmlHttp.open("GET", myUrl, true); xmlHttp.send(null); }

Ici le parametre callback est la fonction qui sera exécutée quand la requete sera terminé et aura bien récupérer le résultat. C'est dans cette fonction que tu vas devoir parser le texte obtenu en json afin de pouvoir le lire correctement et ainsi récupérer tes positions

integrer l'api jcDecaux

2 réponses