Loop de Google map API. L'objet resultant de json_encode n'est pas supporté/utilisable. Que puis-je faire ?

Eléphanteau du PHP | 17 Messages

22 oct. 2018, 02:03

Yo guys! Un petit bonjour du Québec :D

J'ai besoin de votre merveilleuse aide et surtout, merci d'avance de prendre le temps de me lire, de m'aider!

J'ai une page qui affiche une liste de restaurants. Quand on clique sur un restaurant, un dropdown apparait avec des infos dedans, dont une google map. Vous aurez devinez que la map est différente à chaque dropdown, ce qui m'a poussé à faire ce code:

$restaurants = new WP_Query(array('post_type' => 'restaurants', 'posts_per_page' => '-1'));

$nbRest = $restaurants->post_count;

function latlngOnlyArray(){
	global $restaurants;
	$arrayRestaurants = array();
	$x = 0;
	while($restaurants->have_posts()) { $restaurants->the_post();
		$adresse = get_field('api_sing_resto');
		$arrayRestaurants[] = array('lat' => $adresse['lat'], 'lng' => $adresse['lng']);
	$x++; }
	return $arrayRestaurants;
}

$arrayLatLng = latlngOnlyArray();

Code : Tout sélectionner

function initMapByRestaurant() { var nb = <?php echo $nbRest;?>; // The map, centered at Uluru var obj = <?php echo json_encode($arrayLatLng); ?>; for(var i=0; i<nb; i++){ var lat = obj[i]['lat']; var lng = obj[i]['lng']; var uluru = {lat: lat, lng: lng}; var map = new google.maps.Map( document.getElementById('map-'+i), { zoom: 14, center: uluru, disableDefaultUI: true, styles: [ { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#444444" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#d7d7d8" }, { "visibility": "on" } ] } ]}); var marker = new google.maps.Marker({position: uluru, map: map}); } }

Si vous regarder dans le dernier code, j'ai passé en JavaScript. J'ai donc retourné l'array de ma première fonction php en json pour pouvoir utilisé l'objet:

Code : Tout sélectionner

var obj = <?php echo json_encode($arrayLatLng); ?>; for(var i=0; i<nb; i++){ var lat = obj[i]['lat']; var lng = obj[i]['lng'];
Mon problème? Je ne peux pas utiliser l'objet ainsi. Si je passe la dernière valeur de mon while en php, aucun problème, la map affiche a chaque fois la derniere valeur. Pareil si j'affiche l'objet en console.log, ca fonctionne. Je peux juste vraiment pas ecrire un objet à ces endroits.

Quelqu'un a déjà vécu ça, aurait une petite idée de comment je pourrais tourner mon code ?

Merci beaucoup !!