Bien le bonjour, sur mon site web, les membres sont localisé en fonction de leurs longitude et latitude en Javascript, j'aimerais maintenant les afficher sur une carte Google Map...

Comment dois je procéder, afin de méler le PHP dans du Javascrip, effectuer un for() { } ou quoi ?...

Honnêtement, je suis un peu paumé :3

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-21.082147609975646, 55.265911099447614),
  map: map,
  title: "Maiva"
});

Je suis censé faire une boucle en créant ce code la autant de fois qu'il y a de membres en remplacent la latitude par la latitude du membre et la longitude par la longitude du membre (Logique) et en title, mettre son nom

( Et pourquoi pas, afficher son avatar à la place du marqueur... *_*

1 réponse


il est intéressant d'éviter de mélanger du js et du php. Voici 2 solutions.

1) tu passes ton tableau de membres dans ta vue (ce que tu fais visiblement), dans ce cas, tu le mets dans un tableau JS.
2) tu fais une requête AJAX pour récupérer ton tableau de membres (utiliser le format JSON).

Comme ça, tu vas faire ton foreach côté JS et tu n'auras pas à mettre du code php dans le snippet que tu nous a donnée. Ce n'est pas la responsabilité de ce code d'utiliser du php.

pour le 1), ça donnerait ça (en pseudo code);

<script>
var members = <?= $members; ?>

// fonctionnement de map :: https://developer.mozilla.org/fr/docs/JavaScript/Reference/Objets_globaux/Array/map
var markers = members.map(function(member) {
    return new google.maps.Marker({
        position: new google.maps.LatLng(member.latitude, member.longitude),
        map: map,
        title: member.name
    });
});
</script>