Bonjour,
Je voudrais afficher trois Marqueurs sur la carte de Google Map et de pouvoir les déplacer avec un InfoWindow j'ai pu le réaliser via le code suivant et tout fonctionne à merveille:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Google Maps</title>
<meta http-equiv="Content-Type" charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- <META HTTP-EQUIV="Refresh" CONTENT="5"> -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
var marqueur, marqueur2, marqueur3;
var carte;
//$(document).ready(function(){
//carte.clear();
//setMapOnAll(null);
// carte.clearOverlays();
// });
function initialiser() {
var latlng = new google.maps.LatLng(14.734749 ,-17.472845);
var options = {
center: latlng,
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
carte = new google.maps.Map(document.getElementById("carte"), options);
/****************Nouveau code****************/
/* $(document).ready(function(){
marqueur3.setMap(null);
//Effacer le marqueur
}); */
//création du marqueur
marqueur1 = new google.maps.Marker({
position: new google.maps.LatLng(14.734806068014898 ,-17.472651880950934),
map: carte
//title: "Markeur 1"
});
marqueur1.setDraggable(true);
marqueur2 = new google.maps.Marker({
position: new google.maps.LatLng(14.734668585953662 ,-17.47301666137696),
map: carte
//title: "Markeur 2"
});
marqueur2.setDraggable(true);
marqueur3 = new google.maps.Marker({
position: new google.maps.LatLng(14.735215919682636 ,-17.47302202579499),
map: carte
//title: "Markeur 3"
});
marqueur3.setDraggable(true);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading"> Mané </h1>'+
'<div id="bodyContent">'+
'Alioune Mané.</p>'+
'<p>Attribution: Nem@,'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marqueur1.addListener('dragend', function() {
infowindow.open(carte, marqueur1);
});
marqueur2.addListener('dragend', function() {
infowindow.open(carte, marqueur2);
});
marqueur3.addListener('dragend', function() {
infowindow.open(carte, marqueur3);
});
}
// Rafraichir la page en affichant je suis la
/*$(document).ready(function(){
alert("Je suis la");
//carte.setMap(null);
}); */
// Au démarrage de la page on supprime tous les markers affichés
$(document).ready(function(){
});
</script>
</head>
<body onload="initialiser()">
<div id="carte" style="width:100%; height:100%"></div>
</body>
</html>
Maintenant je voudrais que lorsque j'actualise la page les marqueurs qui étaient affichés soient supprimés pour affichés d'autres marqueurs.
Mais je ne sais pas comment faire pour supprimer tous les éléments lors du démarrage puis de les afficher mais je sais une chose que je peux supprimer un marqueur via ce bout de code :
marqueur1.setMap(null);
Mon objectif est d'effacer tous les éléments qui se trouvent sur la carte pour en afficher d'autres
Comment faire ???
Aidez-moi s'il vous plait..
Salut,
L'API de Maps est clair pour cela.
Il faut que tu stockes tes markeurs dans un tableau.
var markers= [];
Quand tu souhaites vider ton tableau, tu appelles ta fonction por chaque marker present dans ton tableau.
$.each(markers, function() {
this.setMap(null);
});
Ca te vide totalement ta map de markeurs.