Merci pour ta réponse,
du coup j'ai rajouté le fichier json en mettant tous les points d'interêts en visibilité off, cependant mon code ne le prends pas dutout en compte.
mon code :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Tutoriel Google Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et
qu'elle ne peut pas être redimensionnée par l'utilisateur -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Inclusion de l'API Google MAPS -->
<!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialiser() {
var latlng = new google.maps.LatLng(48.212239, 16.354433);
//objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
//de définir des options d'affichage de notre carte
var options = {
center: latlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles : [
{
"featureType": "poi.attraction",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.government",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.medical",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.place_of_worship",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.school",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.sports_complex",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station.airport",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station.bus",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station.rail",
"stylers": [
{
"visibility": "off"
}
]
}
]
};
//constructeur de la carte qui prend en paramêtre le conteneur HTML
//dans lequel la carte doit s'afficher et les options
var carte = new google.maps.Map(document.getElementById("carte"), options);
//création du marqueur
var marqueur = new google.maps.Marker({
position: new google.maps.LatLng(48.212239, 16.354433),
map: carte
});
document.getElementById("myBtn").addEventListener("click", function(){
marqueur.setMap(null);
});
document.getElementById("afficher").addEventListener("click", function(){
marqueur.setMap(carte);
});
}
</script>
</head>
<body onload="initialiser()">
<button id="myBtn">Supprimer marqeur</button>
<button id="afficher">Afficher marqeur</button>
<div id="carte" style="width:100%; height:100%"></div>
<script type="text/javascript">
</script>
</body>
</html>
EDIT : Correction des balises de code pour avoir la coloration syntaxique (jordane)