checkbox et javascript

Sujet résolu

23 août 2010 à 14:18:25

Bonjour,

Voila, j'ai une carte de google map sur laquelle j'ai affiché un marqueur, et j'ai une chekbox.
Je souhaite donc que lorsque la checkbox soit coché, le marqueur soit affiché, et vice versa.
Tout fonctionne sauf (vous l'aurez compris) la checkbox.

Je fait donc appel a votre aide.

Voici mon code si vous voulez le tester:

carte.html

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
	<head>
		<title>cartographie Orange</title>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
		<script type='text/javascript' src='carte.js'></script>
	</head>
	<body>
		<script>
			window.onload = function()
			{
				var maCarte = new Carte(19, 3, 3, 'ROADMAP');
				maCarte.addMarker('bidon', 'grincheux', 39.83097051764975, 10.341005467796303);
			}
		</script>
			<h1>Carte:</h1>
		<br/>
		<input type="checkbox" name="2" id="2" checked/> <label for="2" onclick="boxclick(this)" checked>affiche</label><br />

		<div id='map' class='map' style='width:85%; height:75%' >
		</div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>

carte.js

var carte;	//declaration de la carte
var bounds;	//limite de la carte en fonciton des marqueurs
var marker; //tableau contenant tout les marqueurs

function Carte	(
					optZoom,
					Lattitude,
					Longitude,
					optMapTypeId
				)
{
	var optCenterMap = new google.maps.LatLng(Lattitude, Longitude);
	var mapType = google.maps.MapTypeId[optMapTypeId];
	var options =
		{
			center: 				optCenterMap, 		//LatLng(lat:number, lng:number) 		obligatoire
			mapTypeId: 				mapType,			//HYBRID, ROADMAP, SATELLITE, TERRAIN 	obligatoire
			zoom: 					optZoom				//number 								obligatoire
		};
	carte = new google.maps.Map(document.getElementById("map"), options);
	bounds = new google.maps.LatLngBounds();
}

Carte.prototype.addMarker = function 	(
											Window,
											Nom,
											Lattitude,
											Longitude,
											i
										)
{
	var info = new google.maps.InfoWindow(
		{
			content: Window
		});
	var optCenterMarker = new google.maps.LatLng(Lattitude, Longitude);
	bounds.extend(optCenterMarker);
	marker = new google.maps.Marker(
		{
			position : 	optCenterMarker,
			title : 	Nom,
			map : 		carte
		});
	google.maps.event.addListener(marker, 'click', function()
		{
			info.open(carte, marker);
		});
	carte.fitBounds(bounds);
	marker.setVisible(true);
	
};

Carte.prototype.boxclick = function (box)
{
	if (box.checked)
	{
	  marker.setVisible(true);
	} else
	{
	  marker.setVisible(false);
	}
};

EDIT:

Si vous pourriez me dire aussi comment faire en sorte que var marker; soit un tableau (genre var marker[]; et que je puisse ajouter un numéro lors de la création du marqueur pour l'identifier ( marker[i] = new google.maps.Marker) parce qu'il semblerait que cette syntaxe ne soit pas apprécié...

birdy42

23 août 2010 à 14:27:34

Pour le tableau, faut faire : var marker=[];
et pour rajouter une entrée, tu peux faire marker.push(valeur);

varfendell

23 août 2010 à 14:33:30

merci beaucoup pour cette réponse, je vais la tester des que mon premier problème sera résolu

EDIT:
résolu:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
	<head>
		<title>cartographie Orange</title>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
		<script type='text/javascript' src='carte.js'></script>
	</head>
	<body>
		<script>
			window.onload = function()
			{
				var maCarte = new Carte(19, 3, 3, 'ROADMAP');
				maCarte.addMarker('bidon', 'grincheux', 39.83097051764975, 10.341005467796303, 1);
			}
		</script>
			<h1>Carte:</h1>
		<br/>
		<input type="checkbox" name="2" id="2" onclick="boxclick(this, 1)" checked/> <label for="2" >affiche</label><br />

		<div id='map' class='map' style='width:85%; height:75%' >
		</div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>

var carte;	//declaration de la carte
var bounds;	//limite de la carte en fonciton des marqueurs
var marker=[]; //tableau contenant tout les marqueurs

function Carte	(
					optZoom,
					Lattitude,
					Longitude,
					optMapTypeId,
					i
				)
{
	var optCenterMap = new google.maps.LatLng(Lattitude, Longitude);
	var mapType = google.maps.MapTypeId[optMapTypeId];
	var options =
		{
			center: 				optCenterMap, 		//LatLng(lat:number, lng:number) 		obligatoire
			mapTypeId: 				mapType,			//HYBRID, ROADMAP, SATELLITE, TERRAIN 	obligatoire
			zoom: 					optZoom				//number 								obligatoire
		};
	carte = new google.maps.Map(document.getElementById("map"), options);
	bounds = new google.maps.LatLngBounds();
}

Carte.prototype.addMarker = function 	(
											Window,
											Nom,
											Lattitude,
											Longitude,
											i
										)
{
	var info = new google.maps.InfoWindow(
		{
			content: Window
		});
	var optCenterMarker = new google.maps.LatLng(Lattitude, Longitude);
	bounds.extend(optCenterMarker);
	marker[i] = new google.maps.Marker(
		{
			position : 	optCenterMarker,
			title : 	Nom,
			map : 		carte
		});
	google.maps.event.addListener(marker[i], 'click', function()
		{
			info.open(carte, marker[i]);
		});
	carte.fitBounds(bounds);
	//marker[i].setVisible(false);
	
};

function boxclick(box, i)
{
	if (box.checked)
	{
	  marker[i].setVisible(true);
	} else
	{
	  marker[i].setVisible(false);
	}
};

Vince240986

21 mars 2011 à 13:29:28

Bonjour,

je reviens sur ton poste tu pourras peut-être m'aider à solutionner un problème. L'idée est de faire apparaitre des marqueurs en fonction des régions choisies, j'ai suivi ton exemple mais je passe par une base de données: voici mon code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function createXmlHttpRequest() {
	try {
		if (typeof ActiveXObject != 'undefined') {
			return new ActiveXObject('Microsoft.XMLHTTP');
		} else if (window["XMLHttpRequest"]) {
			return new XMLHttpRequest();
		}
	} catch (e) {
		changeStatus(e);
	}
	return null;
};

function downloadUrl(url, callback) {
	var status = -1;
	var request = createXmlHttpRequest();
	if (!request) {
		return false;
	}

	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			try {
				status = request.status;
			} catch (e) {
			}
			if (status == 200) {
				callback(request.responseText, request.status);
				request.onreadystatechange = function() {};
			}
		}
	}
	request.open('GET', url, true);
	try {
		request.send(null);
	} catch (e) {
		changeStatus(e);
	}
};

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') { 
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

 var map;

 function initialize() {
  var latlng = new google.maps.LatLng(46.7, 2.5);
  var myOptions = {
   zoom: 5,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

  downloadUrl("getPoi.php", function(data) { 

   var xml = xmlParse(data);
   var markers = xml.documentElement.getElementsByTagName("marker");
   
   for (var i = 0; i < markers.length; i++) {
    createMarker(parseFloat
	(markers[i].getAttribute("lat")), 
	parseFloat(markers[i].getAttribute("lng")), 
	markers[i].getAttribute('titre'), 
	markers[i].getAttribute('region'), 
	markers[i].getAttribute('description'));
   }
  });

 }

 function createMarker(lat, lng, titre, region, description){
  var latlng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: titre
  });
  
  var infobulle = new google.maps.InfoWindow({
   content: titre
  });

google.maps.event.addListener(marker, 'click', function(event) {
$('#content_map').html(<?php echo 'titre+"<br/>"+region+"<br/>"+description'?>);
   infobulle.open(map, marker);
});
	//marker.setVisible(false);

 }
 
function boxclick(box, i)
{
	if (box.checked)
	{
	  marker[i].setVisible(true);
	} else
	{
	  marker[i].setVisible(false);
	}
}; 

</script>
</head>
<body onload="initialize()">
 <div id="page">
 <div id="dpt">
 
<td valign="top" class="alt1">
<form name="filtre_region" action=""><strong>Filtrer les résultats par Région</strong><br />
<input type="checkbox" name="Auvergne" id="Auvergne" onclick="boxclick(this,'region')"/> Auvergne<br />
<input type="checkbox" name="Ile-de-France" id="Ile-de-France" onclick="boxclick(this,'region')"/> Ile-de-France<br />
<input type="checkbox" name="Basse-Normandie" id="Basse-Normandie" onclick="boxclick(this,'region')"/> Basse-Normandie<br />
</form> <br />
</td>

 </div>
 <div id="map_canvas"></div>
 <div id="content_map">
Détails
 </div>
 </div>
</body>
</html>