Partage

Afficher plusieurs marqueur sur une map

Sujet résolu

20 février 2017 à 16:13:11

Bonjour

Initialement, j'ai réussit a afficher une map pour pouvoir par la suite placer mes marquer, cependant lors de la réalisation de la fct pour afficher les marqueur, rien ne se passe, j'ai regardé bcp de tuto et forum pour pouvoir réaliser ceci mais rien a faire .. le but de lafonction étant d'afficher un certain nombre de marqueur sur la map.

Voici la fonction:

<script>

var rectangle; // on définit différente variable
var map;
var infoWindow;

/*///////////////////////////////////////////////////////////////////
///////// Fonction qui nous permet d'initialiser la map //////////
/////////////////////////////////////////////////////////////////*/

function initAutocomplete() {
	map = new google.maps.Map(document.getElementById('map'), { // on crée une nouvelle map
	center: {lat: 47.081012, lng: 2.398781999999983}, // on choisit la position sur laquelle est centrée la carte
	zoom: 6, // choix du zoom
	mapTypeId: google.maps.MapTypeId.ROADMAP // permet d'utiliser la barre de recherche
	});

	// création de la barre de recherche
	var input = document.getElementById('pac-input');
	var searchBox = new google.maps.places.SearchBox(input);
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

	// on centre la carte sur la position
	map.addListener('bounds_changed', function() {
	searchBox.setBounds(map.getBounds());
	});

	var markers = []; // on crée une variable marker qui contiendra les positions de la recherche

	// on attend que l'utilisateur entre une recherche
	searchBox.addListener('places_changed', function() {
		var places = searchBox.getPlaces();

		if (places.length == 0) {
			return;
		}

		// On supprimes les anciens markers
		markers.forEach(function(marker) {
		marker.setMap(null);
		});
		markers = [];

		// pour chaque lieu, on va recuperer le nom e
		var bounds = new google.maps.LatLngBounds();
		places.forEach(function(place) {
			var icon = {
				url: place.icon,
				size: new google.maps.Size(71, 71),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 34),
				scaledSize: new google.maps.Size(25, 25)
			};

			// on crée un marker pour chaque lieu
			markers.push(new google.maps.Marker({
				map: map,
				icon: icon,
				title: place.name,
				position: place.geometry.location
			}));

			if (place.geometry.viewport) {
				bounds.union(place.geometry.viewport);
			} else {
				bounds.extend(place.geometry.location);
			}
		});

		map.fitBounds(bounds);
	});

	var bounds = {
		north: 47.79839667295524, // On définit les valeurs initiales du rectangle 	avec quatre informations
		south: 46.99524110694597,  // La coordonné de son segment Nord, de son segment Sud, de son segment Est et de son segmen West
		east: 5.042724609375,
		west: 3.548583984375
	};

	// On définie le rectangle et ses différentes propriétés
	rectangle = new google.maps.Rectangle({
		bounds: bounds,
		editable: true, // peremt de modifier la forme du rectangle
		draggable: true // permet de déplacer le rectangle
	});

	rectangle.setMap(map); // on met le rectangle sur la carte

	rectangle.addListener('bounds_changed', showNewRect);

	infoWindow = new google.maps.InfoWindow(); // on définit une bouvelle fen^tre d'information qui ontiendra les coordonnées du rectangle
}

</script>
<?php
function get_value_in_dbb($nombre_point_geolocalisation){

	try
	{
		$bdd = new PDO('mysql:host=localhost;dbname=riadh;charset=utf8', 'root', '');
	}
	catch(Exception $e)
	{
		die('Erreur : '.$e->getMessage());
	}
	if ($nombre_point_geolocalisation==1){

			$donner=$bdd->query('(SELECT `ID`, `Device_ID`, `Latitude`, `Longitude`, `Battery`, `seq_number`, `Recorded_at` FROM hidnseek_mangements LIMIT 0,1) ORDER BY `Recorded_at` DESC');
	$donner -> execute();
	$coordonnee=$donner->fetchAll();

	?>
	<html>
	<table>

	<thead>
	<tr>
		<td>ID</td>
		<td>Device_ID</td>
		<td>Latitude</td>
		<td>Longitude</td>
		<td>Battery</td>
		<td>Seq_number</td>

	</tr>
	</thead>

	<tbody>
		<tr><?php
					foreach($coordonnee as $element){
						?>
		<td><?php echo $element['ID'] ?></td>
		<td><?php echo $element['Device_ID'] ?></td>
		<td><?php echo $element['Latitude'] ?></td>
		<td><?php echo $element['Longitude'] ?></td>
		<td><?php echo $element['Battery'] ?></td>
		<td><?php echo $element['seq_number'] ?></td>
	

	</tr>
	<?php
		}
		?>
	</tbody>
	</table>


	<?php

	}

	elseif($nombre_point_geolocalisation==10){

			$donner=$bdd->query('(SELECT `ID`, `Device_ID`, `Latitude`, `Longitude`, `Battery`, `seq_number`, `Recorded_at` FROM hidnseek_mangements LIMIT 0,10) ORDER BY `Recorded_at` DESC');
	$donner -> execute();
	$coordonnee=$donner->fetchAll();

	?>
	<table>

	<thead>
	<tr>
		<td>ID</td>
		<td>Device_ID</td>
		<td>Latitude</td>
		<td>Longitude</td>
		<td>Battery</td>
		<td>Seq_number</td>

	</tr>
	</thead>

	<tbody>
		<tr><?php
					foreach($coordonnee as $element){
						?>
		<td><?php echo $element['ID'] ?></td>
		<td><?php echo $element['Device_ID'] ?></td>
		<td><?php echo $element['Latitude'] ?></td>
		<td><?php echo $element['Longitude'] ?></td>
		<td><?php echo $element['Battery'] ?></td>
		<td><?php echo $element['seq_number'] ?></td>
	

	</tr>
	<?php
		}
		?>
	</tbody>
	</table>



	<?php

	}

	elseif($nombre_point_geolocalisation==30){

			$donner=$bdd->query('(SELECT `ID`, `Device_ID`, `Latitude`, `Longitude`, `Battery`, `seq_number`, `Recorded_at` FROM hidnseek_mangements LIMIT 0,30) ORDER BY `Recorded_at` DESC');
	$donner -> execute();
	$coordonnee=$donner->fetchAll();

	?>
	<table>

	<thead>
	<tr>
		<td>ID</td>
		<td>Device_ID</td>
		<td>Latitude</td>
		<td>Longitude</td>
		<td>Battery</td>
		<td>Seq_number</td>

	</tr>
	</thead>

	<tbody>
		<tr><?php
					foreach($coordonnee as $element){
						?>
		<td><?php echo $element['ID'] ?></td>
		<td><?php echo $element['Device_ID'] ?></td>
		<td><?php echo $element['Latitude'] ?></td>
		<td><?php echo $element['Longitude'] ?></td>
		<td><?php echo $element['Battery'] ?></td>
		<td><?php echo $element['seq_number'] ?></td>
	

	</tr>
	<?php
		}
		?>
	</tbody>
	</table>

	


	<?php

	}

	elseif($nombre_point_geolocalisation==50){

			$donner=$bdd->query('(SELECT `ID`, `Device_ID`, `Latitude`, `Longitude`, `Battery`, `seq_number`, `Recorded_at` FROM hidnseek_mangements LIMIT 0,50) ORDER BY `Recorded_at` DESC');
	$donner -> execute();
	$coordonnee=$donner->fetchAll();

	?>
	<table>

	<thead>
	<tr>
		<td>ID</td>
		<td>Device_ID</td>
		<td>Latitude</td>
		<td>Longitude</td>
		<td>Battery</td>
		<td>Seq_number</td>

	</tr>
	</thead>

	<tbody>
		<tr><?php
					foreach($coordonnee as $element){
						?>
		<td><?php echo $element['ID'] ?></td>
		<td><?php echo $element['Device_ID'] ?></td>
		<td><?php echo $element['Latitude'] ?></td>
		<td><?php echo $element['Longitude'] ?></td>
		<td><?php echo $element['Battery'] ?></td>
		<td><?php echo $element['seq_number'] ?></td>
	

	</tr>
	<?php
		}
		?>
	</tbody>
	</table>
	
	


	<?php
	}


	elseif($nombre_point_geolocalisation==100){

			$donner=$bdd->query('(SELECT `ID`, `Device_ID`, `Latitude`, `Longitude`, `Battery`, `seq_number`, `Recorded_at` FROM hidnseek_mangements LIMIT 0,100) ORDER BY `Recorded_at` DESC');
	$donner -> execute();
	$coordonnee=$donner->fetchAll();

	?>
	<table>

	<thead>
	<tr>
		<td>ID</td>
		<td>Device_ID</td>
		<td>Latitude</td>
		<td>Longitude</td>
		<td>Battery</td>
		<td>Seq_number</td>

	</tr>
	</thead>

	<tbody>
		<tr><?php
					foreach($coordonnee as $element){
						?>
		<td><?php echo $element['ID'] ?></td>
		<td><?php echo $element['Device_ID'] ?></td>
		<td><?php echo $element['Latitude'] ?></td>
		<td><?php echo $element['Longitude'] ?></td>
		<td><?php echo $element['Battery'] ?></td>
		<td><?php echo $element['seq_number'] ?></td>
	

	</tr>
	<?php
		}
		?>
	</tbody>
	</table>

	<?php

	}

	else{
		echo'Veuillez sélectionner une valeur dans le champ proposé.';
	}


		for ($i=0;$i<=$nombre_point_geolocalisation-1;$i++){
			$listedespoints[$i][0]=$coordonnee[$i]['Latitude'];
			$listedespoints[$i][1]=$coordonnee[$i]['Longitude'];
			//echo'Latitude= '.$listedespoints[$i][0].'   Longitude= '.$listedespoints[$i][1].'<br/>';
		}
	?>

	<script>
	 var liste_des_points=[
	 	<?php echo $listedespoints; 
	 	var_dump($listedespoints);
	 	?>


	 ];

	var imageMarqueur= new google.maps.MarkerImage('images/Marqueurs.png',new google.maps.point(0,0), new google.maps.point(12,12));
	var i=0,li=liste_des_points.length;
	while(i<li){
  	new google.maps.Marker({
          position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
          map: map,
          title: "Marqueur-"+i,
          icon: imageMarqueur
     });
 	 i++;
	}
	</script>
	<?php

}

$infos_geo=get_value_in_dbb(10);


?>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8GEtdljGgrf37hyD0aQGuNCt1Uzdd7Ng&libraries=places&callback=initAutocomplete&signed_in=true" async defer>
</script>
</body>
</html>

Merci d'avance pour vos réponses

-
Edité par KevinWnt 20 février 2017 à 17:10:48

Elisabeth24

20 février 2017 à 18:11:58

je suppose que le var_dump ligne 258 est une erreur, c'est plutôt json_encode ou quelque chose du genre?

Si dans la fonction init... si tu ajoutes:

var marker = new google.maps.Marker({
          position: new google.maps.LatLng(47.081012,2.39878199999983),
          map: map,
          title: "centre"
     });

As-tu bien le marker au centre? Si oui, essaie l'affichage avec l'icône par défaut. (sans définir d'icône)

Je ne comprends pas tout, sur le premier fichier, les markers viennent de données entrées par l'utilisateur via une searchBox, tandis que sur le second fichier, ils proviennent d'une bdd

Si tu peux essayer aussi la fonction suivante, qui est sensée ajouter un marker sur la carte quand on click dessus, à ajouter dans la fonction init_autocomplete

var markers = [];
google.maps.event.addListener(map, 'click', function(evt){
    
    var marker = new google.maps.Marker({
              title: "maker " + markers.length +1,
              position: evt.latLng,
              map: map});
   markers.push( marker);

});

Je ne sais pas si ça aide?

-
Edité par Elisabeth24 20 février 2017 à 18:14:39

Développeuse Web.

KevinWnt

21 février 2017 à 8:37:46

Alors oui j'ai bien le marker au milieu si j'initialise comme vous avez dit, cependant comment ça par défaut ?

les premiers markers servaient a définir un emplacement au pré-alable, une sorte de rectangle prédéfini, et pour les autres, je voulaient sortir la longitude et latitude de plusieurs messages de ma bdd afin de pouvoir tous les placé sur la map par un marker mais c'est la que ça bloque.

Après oui avec votre fonction cela permet de mettre des markers lorsque l'on clique sur la map mais le but aurait été de voir les marker déjà placé initialement sur la map sans pouvoir cliquer dessus.

merci pour votre aide

Elisabeth24

21 février 2017 à 14:35:09

Bonjour,

Je me demande quand tu places les markers sur la carte, et est-ce que la carte est intitialisée quand tu les places.

Une suggestion créer une fonction qui place les markers extraits de la base de données, :

function placeMarkers(){
 var i=0,li=liste_des_points.length;
    while(i<li){
    new google.maps.Marker({
          position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
          map: map,
          title: "Marqueur-"+i,
     });
     i++;
    }
}

Puis l'appeler à la fin de la fonction init_autocomplete. Il faut vérifier que tu as bien les données dans le tableau liste_des_points.

placeMarkers();

Je ne mets pas d'icône aux markers dans un premier temps, des fois que ce soit l'icône qu'il n'arrive pas à créer.

Développeuse Web.

KevinWnt

21 février 2017 à 14:44:17

Alors du coup j'a iréussit a résoudre le problème, j'arrive à afficher plusieurs marqueur lorsque je les initialise a la main :

var myLatLng = [
	{lat: <?php echo $infos_geo[0][0];?>, lng: <?php echo $infos_geo[0][1];?>},
	{lat: <?php echo $infos_geo[8][0];?>, lng: <?php echo $infos_geo[8][1];?>}];

	var map = new google.maps.Map(document.getElementById('map'), {
   	zoom: 4,
    center: myLatLng[0],
    });

	for (var i=0 ; i<myLatLng.length ; i++){
 		var marker = new google.maps.Marker({
   		position: myLatLng[i],
    	map: map,
    	title: 'Adresse n°'+i,
   		});

mais lorsque je veux les insérer à travers une fonction je n'arrive même pas à afficher la map :

	var myLatLng = [<?php
					for ($j=0 ; $j< $longueur; $j++){
   						 echo '{ lat: '.$infos_geo[$j][0].' , lng:'. $infos_geo[$j][1].', }';
					} ?> ];
					
         
      
 
        var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: myLatLng[0],
        });
 
        for (var i=0 ; i<myLatLng.length ; i++){
            var marker = new google.maps.Marker({
            position: myLatLng[i],
            map: map,
            title: 'Adresse n°'+i,
            });
        }

sachant que $longueur est:

$longueur=count($infos_geo);

-
Edité par KevinWnt 21 février 2017 à 16:40:51

Elisabeth24

21 février 2017 à 18:37:43

J'utilise la fonction php json_encode pour passer un tableau de php à javascript,

//Les variables ci-dessous sont globales, pour être accessibles dans la fonction init_autocomplete, ou autre
//on passe les points de PHP à javascript via la fonction json_encode
      var myLatLng = <?php  echo json_encode($infos_geo,JSON_NUMERIC_CHECK)?>;
      //un tableau pour enregistrer les markers
      var markers = new Array();

Il faudrait regarder ce que tu as dans le tableau avant?

Je reprends le bout de code à insérer dans la fonction init_autocomplete

//Vérifier tout de même qu'on a quelque chose dans le tableau
console.log(myLatLng); 
for (var i=0 ; i<myLatLng.length ; i++){
          var marker = new google.maps.Marker({
          position: new google.maps.LatLng(myLatLng[i][0], myLatLng[i][1]),
          map: map,
          title: 'Adresse n°'+i,
          });
          markers.push(marker);
      }

-
Edité par Elisabeth24 21 février 2017 à 18:39:14

Développeuse Web.

KevinWnt

22 février 2017 à 9:50:59

Bonjour, du coup oui avec votre informations maintenant je peux afficher tous les points présent, déjà un grand merci car j'ai bien galéré a essayer de le faire

Par contre pour pouvoir tracer une ligne entre chaque point qui défile, j'ai essayer de trouver des tutos avec l'outil polyline mais rien a faire peut impote dans quel sens je l'utilise la map s'affiche avec les marqueurs mais aucune ligne ne vient :

    var myLatLng = <?php  echo json_encode($infos_geo,JSON_NUMERIC_CHECK)?>;
      //un tableau pour enregistrer les markers
    var markers = new Array();
      //Vérifier tout de même qu'on a quelque chose dans le tableau
	console.log(myLatLng);
	for (var i=0 ; i<myLatLng.length ; i++){
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(myLatLng[i][0], myLatLng[i][1]),
        map: map,
        title: 'Adresse n°'+i,
        });

        markers.push(marker);
        
        var flightPlanCoordinates = [
    	{lat: myLatLng[i][0], lng: myLatLng[i][1]},
  		];
  		var flightPath = new google.maps.Polyline({
   		path: flightPlanCoordinates,
    	geodesic: true,
    	strokeColor: '#FF0000',
    	strokeOpacity: 1.0,
   		strokeWeight: 2
  		});

  		flightPath.setMap(map);

    }

Merci pour votre aide

Elisabeth24

22 février 2017 à 11:53:43

Apparement, il n'y a qu'un point dans votre polyline, je pense que c'est ça le problème

var myLatLng = <?php  echo json_encode($infos_geo,JSON_NUMERIC_CHECK)?>;
 
 //un tableau pour enregistrer les positions
var flightPlanCoordinates = [];
for (var i=0 ; i<myLatLng.length ; i++){
    var position = new google.maps.LatLng(myLatLng[i][0], myLatLng[i][1]);
    var marker = new google.maps.Marker({
        position: position ,
        map: map,
        title: 'Adresse n°'+i,
    });
 
    //J'ajoute la position à ma ligne 
    flightPlanCoordinates.push( position);
}
//en dehors de la boucle for
var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
    });
 
    flightPath.setMap(map);

-
Edité par Elisabeth24 22 février 2017 à 11:57:46

Développeuse Web.