11499 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Filtrer les markers sur une carte

Bonjour,
Je souhaite filtrer les résultats d'une recherche avec une liste déroulante en utilisant Google Maps JavaScript API
Mes compétences s’arrêtent au code ci-dessous et après de nombreuses recherches je ne parviens pas à enlever un ou deux markers sur ma carte selon le choix de ma liste déroulante (voir les hôtels ou les restos).
Donc j'ai juste mis le code de la liste déroulante sur ma page index.html et je ne sais pas comment cela pourrait se coder dans ma page script.js (tout le reste fonctionne! infobulles, markers...).

Voici le code :
index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Google Maps APIs</title>

	<link href="style.css" rel="stylesheet">
	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->

</head>

<body>

	<div id="map" style="width:500px;height:380px;"></div>
	
	<select id="type" onchange="filterMarkers(this.value);">
	    <option value="">Please select category</option>
	    <option value="resto">restaurants</option>
	    <option value="hotel">hotels</option>
	</select>


	<script src="script.js"></script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=MyAPIkey&amp;callback=initMap"></script><br>

</body>
</html>


script.js

//var restaurant1;
//var restaurant2;

function initMap() {

	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 8,
		center: new google.maps.LatLng(43.349250, 5.416117),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});


	 restaurant1 = {
		info: '<strong>Restaurant1</strong><br>\
					Description...<br>\
					Adresse<br>\
					<a href="https://www.google.fr">Adresse 1</a>',
		lat: 43.1873178,
		long: 5.625988300000017
	};


	 restaurant2 = {
		info: '<strong>restaurant2</strong><br>\
					Description...<br>\
					Adresse<br>\
					<a href="https://www.google.fr">Adresse 2</a>',
		lat: 43.2579328,
		long: 5.383642699999996
	};

	 hotel1 = {
		info: '<strong>hotel1</strong><br>\
					Description...<br>\
					Adresse<br>\
					<a href="https://www.google.fr">Adresse 1</a>',
		lat: 43.3079328,
		long: 5.953642699999996
	};

	var locations = [
      [restaurant1.info, restaurant1.lat, restaurant1.long, 0],
      [restaurant2.info, restaurant2.lat, restaurant2.long, 1],
      [hotel1.info, hotel1.lat, hotel1.long, 2],
    ];

	var infowindow = new google.maps.InfoWindow({});

	var marker, i;

	for (i = 0; i < locations.length; i++) {
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			map: map
		});

		google.maps.event.addListener(marker, 'click', (function (marker, i) {
			return function () {
				infowindow.setContent(locations[i][0]);
				infowindow.open(map, marker);
			}
		})(marker, i));
		// Removes the markers from the map, but keeps them in the array.
		function clearMarkers() {
		  setMapOnAll(null);
		}
		// gmarkers1.push(marker1);

	}

}


J'ai enlevé ma clé API mais je crois que la carte peut s'afficher sans clé aussi...
Merci d'avance Smiley smile [/i][/i][/i]
Modifié par woubi (22 Jan 2016 - 12:05)
Bonjour,

Vous pourriez peut-être passer par un .setVisible() ou un .setOptions() ? :
 oMarker.setVisible(true);  // affiche le marker
 oMarker.setVisible(false); // masque le marker

 oMarker.setOptions({'visible' : true});  // affiche le marker
 oMarker.setOptions({'visible' : false}); // masque le marker
Bonjour,

Pour afficher tel ou tel marqueurs, je les stockerais à leur création dans différents tableaux qui serait mes différents types d'établissement.
Ensuite, tu n'as qu'à cacher/afficher les marqueurs selon le type choisi dans le select avec le code d'Olivier ci-dessus, en parcourant les tableaux.

Ce qui donnerait un truc du genre :
http://codepen.io/anon/pen/YwYEvb
Merci beaucoup, tout fonctionne!
J'ai ajouté une troisième catégorie dans la liste déroulante.
Deux petites choses cependant (mais mon sujet est résolu Smiley biggrin )
Je ne comprends pas ce bout de code :
    switch (locations[i][4])

A quoi correspond le second paramètre ?
Ensuite dans la liste déroulante, je souhaite que quand on recharge la page (après avoir choisi une catégorie) le choix se remettent sur "please select a category"... comment faire ?
Merci[/i]
Bonjour,
woubi a écrit :
Je ne comprends pas ce bout de code :
    switch (locations[i][4])

A quoi correspond le second paramètre ?

De quel second paramètre tu parles ? (pour info, j'ai remplacer les i par des j pour éviter un bug d'affichage sur le forum)
locations : c'est ton tableau avec tous les informations de tes marqueurs...
locations[j] : c'est la ligne actuellement lue dans ton tableau (boucle for)
locations[j][4] : c'est le cinquième paramètre sur ta ligne lue correspondant au type d'établissement (paramètre que j'ai dû rajouter pour faire le lien)
woubi a écrit :
Ensuite dans la liste déroulante, je souhaite que quand on recharge la page (après avoir choisi une catégorie) le choix se remettent sur "please select a category"... comment faire ?

Euh, là je sèche un peu, normalement le select revient à son état initial au rechargement de la page, à la rigueur ajoute l'attribut "selected" sur cette option, mais si c'est la première normalement ça ne changera pas grand chose.
woubi a écrit :
Deux petites choses cependant (mais mon sujet est résolu Smiley biggrin )

Pense justement à bien mettre le topic en résolu Smiley cligne

Content d'avoir pu t'aider. Smiley biggrin [/i]
Modifié par SolidSnake (22 Jan 2016 - 08:09)
Merci pour ces explications!
Je t'avoue que c'est encore flou pour moi! Mais je vais relire ce code (plusieurs fois)!
Pour la liste déroulante j'ai mis :
fichier js
$('#type').val('liste');

fichier html
	<select id="type">
	    <option value="liste">Please select category</option>
	    <option value="resto">restaurants</option>
	    <option value="hotel">hotels</option>
	    <option value="cafe">cafes</option>
	</select>

et ainsi quand je recharge ma page j'ai bien "Please select category" qui s'affiche!
tout est ok! Smiley biggrin
Modifié par woubi (22 Jan 2016 - 12:05)
Sujet clos
Aller à