Sujet Précédent Sujet Suivant

Montrer/caher les markers de "base" de googlemaps

spartiate290495 Messages postés 2 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 25 janvier 2019 - 24 janv. 2019 à 17:22
jordane45 Messages postés 38179 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 mai 2024 - 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>

A voir également:

Montrer/caher les markers de "base" de googlemaps
Base de données javascript - Conseils pratiques -Javascript
Connexion base de données - Conseils pratiques -PHP
Base de donnée marques - Forum PHP
Nomenclature base de données - Conseils pratiques -PHP
Location base de données agence immobilière ✓ - Forum Visual Basic 6

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38179 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 mai 2024 344
24 janv. 2019 à 17:57

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/

Réponse 2 / 3

spartiate290495 Messages postés 2 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 25 janvier 2019
Modifié le 25 janv. 2019 à 11:15

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)

Réponse 3 / 3

jordane45 Messages postés 38179 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 mai 2024 344
25 janv. 2019 à 11:21

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

.

Discussions similaires

extraction de données d'une base oracle

Prob de Restauration base de données

conception base de données e-commerce

Problème de lenteur, accès distant à base Access

Problème connection base de données SQL EBP

Votre réponse

Discussions similaires