Montrer/caher les markers de "base" de googlemaps

Messages postés
2
Date d'inscription
jeudi 24 janvier 2019
Dernière intervention
25 janvier 2019
- - Dernière réponse : jordane45
Messages postés
24536
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2019
- 25 janv. 2019 à 11:21
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>
Afficher la suite 

Votre réponse

3 réponses

Meilleure réponse
Messages postés
24536
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2019
362
1
Merci
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/


Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CodeS-SourceS

Codes Sources 117 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jordane45
Messages postés
2
Date d'inscription
jeudi 24 janvier 2019
Dernière intervention
25 janvier 2019
0
Merci
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)
Commenter la réponse de spartiate290495
Messages postés
24536
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2019
362
0
Merci
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

.

Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.