Le portail francophone de la géomatique

asma_kadjoudj · Sun 22 May 2016 18:13

Je mets en place une carte google maps et Je souhaiterais afficher des cases à cocher pour appeler chaque couche kml (il y en aura une dizaine) ou séparemment ou toutes à la fois.
J'ai essayé plusieurs solutions sans y parvenir.
merci

demo972 · Mon 23 May 2016 12:15

Bonjour,

As tu un exemple de ce que tu as déjà produit ?

A bientôt !

asma_kadjoudj · Mon 23 May 2016 16:06

code html et code javascript

demo972 · Mon 23 May 2016 16:56

Oui bon c'est pas exactement ce que je te demandais

Mais pour cette fois on va faire comme ci... ^^

Donc concernant ton problème, si je l'ai bien compris il faut que tu alternes entre layer.setMap(map) et layer.setMap(null) pour afficher ou non ton layer kml.
La doc de google map le dit clairement : https://developers.google.com/maps/docu … sOverview.

Pour cela le moins compliqué serait que tu fasses tes inputs type='checkbox' et qu'ensuite tu fasses un écouteur d'évent change, et quand l'input est checked (true).
La encore une petite recherche sur google et tu trouves des exemples qui peuvent t'aider : https://www.google.fr/webhp?sourceid=ch … 20switcher

Ensuite je te fournis un bout de code que j'ai tapé pour t'aider (largement améliorable ! mais qui te servira de base):
http://jsfiddle.net/luda973/T78Hd/31/

ps : Tu pourras améliorer le faite de ne pas ajouter autant de variable qu'il y a de layer, mais aussi de mieux gérer la logique des les événements afin de ne pas générer d’erreurs.
ps 2: google est ton ami

En espérant avoir pu cerner tes attentes... Si ce n'est pas le cas n'hésites pas à montrer un bout de code que tu as fait pour nous aiguiller.

A plus.

asma_kadjoudj · Mon 23 May 2016 17:40

salut demo972
J'ai envoyé le fichier html.
Merci pour votre aide

Code:

<!DOCTYPE html>
<html>
<head>
<title>*********</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css">
html { height: 100%;
} body {
height: 100%; margin: 0px; padding: 0px;
} #map {
height: 100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script> <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.281071, 8.393555); 
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN, 
navigationControl: true, mapTypeControl: true, 
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM.LEFT,
style: google.maps.ScaleControlStyle.DEFAULT }
};
 
var map = new google.maps.Map(
document.getElementById("map"), myOptions);
 
var kmllayer1 = new google.maps.KmlLayer('chemin_de_mon_fichier_kml1', {preserveViewport:true});
    kmllayer1.setMap(map);
    google.maps.event.addListener(kmllayer1, 'click', function(){
    map.setZoom(14);});
    center: latlng
    tag:'chk1'    
 
var kmllayer2 = new google.maps.KmlLayer('chemin_de_mon_fichier_kml2', {preserveViewport:true});
    kmllayer2.setMap(map);
    google.maps.event.addListener(kmllayer2, 'click', function(){
    map.setZoom(14);
    center: latlng
    tag:'chk2'
});
}
 
 
 
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1)
{
mapdiv.style.width = '100%'; myOptions = {
navigationControlOptions : {
style : google.maps.NavigationControlStyle.ANDROID
},
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU }
};
map.setOptions(myOptions); } else {
mapdiv.style.width = '100%'; }
}
 
 
</script>
</head>
 
<body onload="initialize()">
<div id="map" style="width: 622px; height: 500px;"></div>
<div><p><label><input type="checkbox" id="mon_ficher.kml1" onclick="toggleFile(this.id)" />
kml1</label></p>
<p><label><input type="checkbox" id="mon_ficher.kml2" onclick="toggleFile(this.id)" />
kml2</label></p></div>
 
<!-- Include Javascript -->
<script type="text/javascript" >
    function toggleFile(file) {
        var objCheckbox = document.getElementById(file);
        if (objCheckbox.checked) {
            readKml(file);
        }
        else {
            ge.getFeatures().removeChild(currentKml[file]);
            currentKml[file] = null;
        }
    }

    function readKml(file) {
        var kmlFolder = "chemin_de_mon_dossier_ou_se_trouvent_les_fichiers_kml"; // To set
        var kmlUrl = kmlFolder + file;
        google.earth.fetchKml(ge, kmlUrl, function (kml) {
            if (!kml) {
                alert("Erreur : Lecture du fichier KML impossible !");
                return;
            }
            ge.getFeatures().appendChild(kml);
            currentKml[file] = kml;
            if (kml.getAbstractView()) {
                ge.getView().setAbstractView(kml.getAbstractView());
            }
        });
    }
    var currentKml = {
        "mon_ficheir_kml1": null, // To set
    }
    var currentKml = {
        "mon_ficheir_kml2": null, // To set
    }



</script> 
</body>
</html>

Dernière modification par asma_kadjoudj (Mon 23 May 2016 17:42)

asma_kadjoudj · Mon 23 May 2016 18:32

Comment éliminer cette erreur,"Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details"quand excuter cette programme

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <title>KML Layers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 11,
                center: { lat: 41.876, lng: -87.624 }
            });

            var ctaLayer = new google.maps.KmlLayer({
                url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
                map: map
            });
        }

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCf14TyeRinOafY73cl7rwovGG_3imhm-U&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

demo972 · Mon 23 May 2016 21:29

Bonsoir,

Je ne connais pas très bien google maps. Mais cette erreur, quand tu regarde dans ta console javascript te dit que tu n'as pas activé google maps javascript api.

liens : https://developers.google.com/maps/docu … errorcodes

Il faut donc faire les démarches ici : https://developers.google.com/maps/docu … -key?hl=fr

Tu clics sur Google Developers Console (etape 1) une fois redirigé tu cherches google maps javascript. Ensuite tu suis les démarches.

Puis une fois que tu as ta clef tu remplaces juste cette portion de code par ta nouvelle clef "https://maps.googleapis.com/maps/api/js?key=AIzaSyCf14TyeRinOafY73cl7rwovGG_3imhm-U&signed_in=true&callback=initMap";

Et l'erreur devrait disparaître.

Communauté	Ressources	L'emploi	Le marché	L'association	Fils RSS
Forum Blogs Wiki Planet Sites amis	Agenda Biblio Fiches AMO-CNIG Paris PCGIS Téléchargements	Offres d'emploi Banque de CV Formations Démarche Métiers	Geo-Entreprises Geo-Communiqué Appels d'offres	L'association Qui sommes-nous ? Nous aider Bienfaiteurs Partenaires Historique Statuts	Tout le site Job Géomatique Services GeoBlogs ...	Faire un don Mentions légales

Le portail francophone de la géomatique

Annonce

#1 Sun 22 May 2016 18:13

kml_layer

#2 Mon 23 May 2016 12:15

Re: kml_layer

#3 Mon 23 May 2016 16:06

Re: kml_layer

#4 Mon 23 May 2016 16:56

Re: kml_layer

#5 Mon 23 May 2016 17:40

Re: kml_layer

Code:

#6 Mon 23 May 2016 18:32

Re: kml_layer

Code:

#7 Mon 23 May 2016 21:29

Re: kml_layer

Pied de page des forums