Cette fonction permet de supprimer de façon sélective des éléments d'une carte Google Maps (des marqueurs, infobulles, etc.).
clear
- Paramètres spécifiques :
- name <chaîne> ou tableau de <chaîne> : Nom de stockage des objets à supprimer
- first <booléen> : Supprimer le premier objet ajouté
- last <booléen> : Supprimer le dernier objet ajouté
- tag <chaîne> ou <entier> : tag utilisateur pour identifier l'objet
- Résultat du Callback : aucun
Si, ni le premier, ni le dernier objet ne sont définis, alors tous les objets seront supprimés.
Vous pouvez voir un exemple d'utilisation des tag utilisateur dans l'exemple : menu contextuel sur click droit.
// De nombreux overlay ont été préalablement ajoutés
$('#test-button').click(function(){
var tg = $('#test-target').val(),
wh = $('#test-which').val(),
todo = {action:'clear'};
if (tg != 'all'){
todo['list'] = tg; /* Il peut s'agir d'un tableau de noms : ['marker', 'polyline', ...] */
}
if (wh == 'premier'){
todo['first'] = true;
}
if (wh == 'dernier'){
todo['last'] = true;
}
$('#test').gmap3(todo);
}
Carte avec clear
Code complet avec clear
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<title>Votre titre de page</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#maCarte{
height: 350px;
width: 100%;
}
.cluster{
color: #FFFFFF;
text-align:center;
font-family: 'Arial, Helvetica';
font-size:11px;
font-weight:bold;
}
.cluster-1{
background-image:url(http://www.votredomaine.fr/images/m1.png);
line-height:53px;
width: 53px;
height: 52px;
}
.cluster-2{
background-image:url(http://www.votredomaine.fr/images/m2.png);
line-height:53px;
width: 56px;
height: 55px;
}
.cluster-3{
background-image:url(http://www.votredomaine.fr/images/m3.png);
line-height:66px;
width: 66px;
height: 65px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
$(function(){
$('#maCarte').gmap3(
{
action:'init',
options:{
center:[46.578498,2.457275],
zoom: 4
}
},
/* Ajout des différent overlays */
{
/* Ajoute des clusteurs */
action: 'addMarkers',
radius:60,
markers: [
[48.82567253451685,2.3693843749999814], //#1
[48.82567253451685,2.2693843749999814], //#1
[48.82567253451685,2.1693843749999814], //#1
[48.82567253451685,2.0693843749999814], //#1
[45.82567253451685,2.3693843749999814], //#2
[45.82567253451685,2.2693843749999814], //#2
[45.82567253451685,2.1693843749999814], //#2
[45.82567253451685,2.0693843749999814], //#2
[48.82567253451685,1.918], // #1 after average
[47.3,1.918] // no group
],
clusters:{
// Ce style sera utilisé pour les clusters comportant plus de 0 marqueurs
0: {
content: 'CLUSTER_COUNT',
width: 53,
height: 52
},
// Ce style sera utilisé pour les clusters comportant plus de 10 marqueurs
2: {
content: 'CLUSTER_COUNT',
width: 56,
height: 55
},
// Ce style sera utilisé pour les clusters comportant plus de 20 marqueurs
4: {
content: 'CLUSTER_COUNT',
width: 66,
height: 65
}
}
},
{
/* Ajoute 3 marqueurs */
action: 'addMarkers',
markers:[
[48.8620722, 2.352047],
[46.59433,0.342236],
[42.704931, 2.894697]
]
},
{
/* Ajoute un cercle */
action: 'addCircle',
center: [47.34329,5.028076],
radius : 250000,
fillColor : "#F4AFFF",
strokeColor : "#CB53DF"
},
{
/* Ajoute un cercle */
action: 'addCircle',
center: [47.34329,5.028076],
radius : 125000,
fillColor : "#008BB2",
strokeColor : "#005BB7"
},
{
/* Ajoute un rectangle */
action: 'addRectangle',
bounds: {ne:[47.238965,-1.607666], sw:[48.404409,-4.508057]},
radius : 750,
fillColor : "#008BB2",
strokeColor : "#005BB7"
},
{
/* Ajoute une polyline */
action: 'addPolyline',
options:{
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
},
path:[
[53.08478686807706, -0.443115624999999],
[53.242865580591584, 0.479735937500001],
[51.853424606562065, 0.567626562500001],
[52.015993653812835, -0.706787499999999],
[52.66039236803361, -0.179443749999999]
]
},
{
/* Ajoute une polyline */
action: 'addPolyline',
options:{
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
},
path:[
[52.63372973171113, 1.798095312500001],
[52.63372973171113, 3.468017187500001]
]
},
{
/* Ajoute une polyline */
action: 'addPolyline',
options:{
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
},
path:[
[53.37415340143462, 4.215087500000001],
[53.37415340143462, 5.753173437500001],
[53.031964521054995, 6.104735937500001],
[52.76688041593213, 5.841064062500001],
[52.79346182438923, 4.786376562500001],
[52.71366888314625, 5.885009375000001],
[52.31250879780346, 6.368407812500001],
[51.8805603577419, 6.280517187500001],
[51.93478275669203, 4.390868750000001],
[53.37415340143462, 4.215087500000001]
]
},
{
/* Ajoute un polygone */
action: 'addPolygon',
options:{
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
},
paths:[
[47.23896534797107, 10.103759375000001],
[45.78744522454207, 10.894775000000001],
[45.20216719900454, 13.004150000000001],
[44.798208663960814, 10.894775000000001],
[42.76798523689034, 10.103759375000001],
[44.798208663960814, 9.400634375000001],
[45.264061876535, 7.291259375000001],
[45.78744522454207, 9.400634375000001]
]
}
);
});
function clearThat(){
var tg = $('#target').val(),
wh = $('#which').val(),
todo = {action:'clear'};
if (tg != 'all'){
todo['list'] = tg; /* Il peut s'agir d'un tableau de noms : : ['marker', 'polyline', ...] */
}
if (wh == 'first'){
todo['first'] = true;
}
if (wh == 'last'){
todo['last'] = true;
}
$('#maCarte').gmap3(todo);
}
</script>
</head>
<body>
<select id="target">
<option>all</option>
<option>cluster</option>
<option>marker</option>
<option>circle</option>
<option>rectangle</option>
<option>polyline</option>
<option>polygon</option>
</select>
<select id="which">
<option>all</option>
<option>last</option>
<option>first</option>
</select>
<input type="button" value="Effacer" onclick="clearThat();">
<div id="maCarte" class="gmap3"></div>
</body>
</html>