Montrer/caher les markers de "base" de googlemaps

Signaler
Messages postés
2
Date d'inscription
jeudi 24 janvier 2019
Statut
Membre
Dernière intervention
25 janvier 2019
-
Messages postés
32406
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 mai 2021
-
Bonjour,

Je voudrais pouvoir ajouter deux boutons à coté de ma carte google maps: un ajouter et un supprimer.

ces deux boutons me permettraient d'afficher ou de cacher les markers types (restaurants/bus/magazins) déja présents sur google maps.

je m'arrache les cheveux depuis deux heures merci d'avance pour vos réponses.

ps: j'ai déja creer deux boutons pour afficher/cacher un marqeur que j'ai creer cependant je ne sais pas comment récupérer l'id de ceux déja présents sur maps.




Mon code:

<code js>
<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,


};

//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>





</code>

3 réponses

Messages postés
32406
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 mai 2021
347
Bonjour,

Les "markers" dont tu parles n'en sont pas vraiment.
Ce sont des point d'interet...

https://developers.google.com/maps/documentation/javascript/reference/map#MapTypeStyle

La configuration passe par :
https://developers.google.com/maps/documentation/javascript/style-reference


Exemple :
[
  {
    "featureType": "poi.attraction",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "poi.business",
    "elementType": "labels.icon",
    "stylers": [
      {
        "color": "#8a5fdc"
      }
    ]
  },
  {
    "featureType": "poi.business",
    "elementType": "labels.text",
    "stylers": [
      {
        "color": "#8a5fdc"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.local",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]


Tu peux te servir de cette URL pour t'aider à configurer
https://mapstyle.withgoogle.com/


Messages postés
2
Date d'inscription
jeudi 24 janvier 2019
Statut
Membre
Dernière intervention
25 janvier 2019

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)
Messages postés
32406
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 mai 2021
347
Ton code ne prend pas en compte... c'est à dire ?
TU as vidé le cache de ton navigateur ?
Tu as des messages/erreurs dans la console ?

Merci d'apporter un maximum de précisions et de détails.....

PS, à l'avenir, pour poster ton code, merci de le faire en y précisant le langage afin d'avoir la coloration syntaxique...
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.