Aller au contenu

Googlemap API cacher et montrer des icones

papa

Par papa
dans AjaX et JavaScript

 Partager

Sujets conseillés

papa

papa

Posté
Posté

Bonjour à tous,

J'essaye de développer une page basée sur google map api pour géolocaliser des locations

Le code ci-dessous permet de faire apparaitre différents icones en fonction du type de location

Je voudrai pouvoir masquer et faire apparaitre ces icon classe par classe, mais je n'arrive pas à trouver le Javascript adapté

Quelqu'un peut-il m'aider SVP ?

<script src="http://maps.google.com/maps?file=api&v=2&key=<? print("$API");?>" type="text/javascript"></script>

     <script type="text/javascript">
    //<![CDATA[

	    var appart = new GIcon(); 
    appart.image = 'http://www.louer-en-france.com/googlemap/png/appart.gif';
    appart.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    appart.iconSize = new GSize(28, 27);
    appart.shadowSize = new GSize(22, 20);
    appart.iconAnchor = new GPoint(6, 20);
    appart.infoWindowAnchor = new GPoint(5, 1);


	    var camping = new GIcon(); 
    camping.image = 'http://www.louer-en-france.com/googlemap/png/camping.gif';
    camping.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    camping.iconSize = new GSize(12, 20);
    camping.shadowSize = new GSize(22, 20);
    camping.iconAnchor = new GPoint(6, 20);
    camping.infoWindowAnchor = new GPoint(5, 1);

	    var manoir = new GIcon(); 
    manoir.image = 'http://www.louer-en-france.com/googlemap/png/manoir.gif';
    manoir.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    manoir.iconSize = new GSize(32, 32);
    manoir.shadowSize = new GSize(22, 20);
    manoir.iconAnchor = new GPoint(6, 20);
    manoir.infoWindowAnchor = new GPoint(5, 1);

	    var villa = new GIcon(); 
    villa.image = 'http://www.louer-en-france.com/googlemap/png/villa.gif';
    villa.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    villa.iconSize = new GSize(32, 32);
    villa.shadowSize = new GSize(22, 20);
    villa.iconAnchor = new GPoint(6, 20);
    villa.infoWindowAnchor = new GPoint(5, 1);


    var maison = new GIcon(); 
    maison.image = 'http://www.louer-en-france.com/googlemap/png/maison.gif';
    maison.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    maison.iconSize = new GSize(27, 22);
    maison.shadowSize = new GSize(22, 20);
    maison.iconAnchor = new GPoint(6, 20);
    maison.infoWindowAnchor = new GPoint(5, 1);

	    var mobil = new GIcon(); 
    mobil.image = 'http://www.louer-en-france.com/googlemap/png/mobil.gif';
    mobil.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    mobil.iconSize = new GSize(31, 15);
    mobil.shadowSize = new GSize(22, 20);
    mobil.iconAnchor = new GPoint(6, 20);
    mobil.infoWindowAnchor = new GPoint(5, 1);

		    var hote = new GIcon(); 
    hote.image = 'http://www.louer-en-france.com/googlemap/png/hote.gif';
    hote.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    hote.iconSize = new GSize(32, 20);
    hote.shadowSize = new GSize(22, 20);
    hote.iconAnchor = new GPoint(6, 20);
    hote.infoWindowAnchor = new GPoint(5, 1);

		   var chalet = new GIcon(); 
    chalet.image = 'http://www.louer-en-france.com/googlemap/png/chalet.gif';
    chalet.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    chalet.iconSize = new GSize(32, 20);
    chalet.shadowSize = new GSize(22, 20);
    chalet.iconAnchor = new GPoint(6, 20);
    chalet.infoWindowAnchor = new GPoint(5, 1);



    var customIcons = [];
    customIcons["1"] = appart;
    customIcons["2"] = camping;
	 customIcons["3"] = manoir; 
	 customIcons["4"] = villa; 
	 customIcons["5"] = maison; 
	 customIcons["6"] = mobil;
	  customIcons["7"] = hote;
	  customIcons["8"] = chalet;



    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GOverviewMapControl());
		map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(45.00, 3.00), 5);

         GDownloadUrl("xml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("ma");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("n");
            //var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("t");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("a")),
                                    parseFloat(markers[i].getAttribute("b")));
            var marker = createMarker(point, name, type);
            map.addOverlay(marker);

 	   }
        });

	  }
    }

    //]]>
    </script>

Ce script est en ligne en test in situe sur la page : http://www.louer-en-france.com/googlemap/googlemap.php

klelugi

klelugi

Posté
Posté

Je te conseille néanmoins d'utiliser Ajax afin de n'afficher qu'une partie des marqueurs a la fois, par exemple n'afficher que les villas a l'affichage de la page, et ne recharger d'autres marqueurs qu'après un clic de l'utilisateur. Ceci afin de ne pas ralentir l'affichage de ta carte.

Par exemple : lorsque tu cliques sur un lien Chalets, Il faudrait donc qu'a l'appel d'un nouveau fichier : xml_chalets.php tu effaces avant tous les marqueurs deja présent sur la carte. ( map.removeOverlay(); )

Bon courage

papa

papa

Posté
  • Auteur
Posté
Je te conseille néanmoins d'utiliser Ajax afin de n'afficher qu'une partie des marqueurs a la fois, par exemple n'afficher que les villas a l'affichage de la page, et ne recharger d'autres marqueurs qu'après un clic de l'utilisateur. Ceci afin de ne pas ralentir l'affichage de ta carte.

Par exemple : lorsque tu cliques sur un lien Chalets, Il faudrait donc qu'a l'appel d'un nouveau fichier : xml_chalets.php tu effaces avant tous les marqueurs deja présent sur la carte. ( map.removeOverlay(); )

Bon courage

En fait j'ai fait une compression maximum du xml (tag à un chiffre et une lettre) donc je n'ai pas de gros pb de lenteur pour faire monter la page en revanche la navigation est beaucoup plus ch... si on doit faire revenir un xml par affichage (surtout avec IE ) ça oblige à recharger la carte

tu dois arriver à les montrer/cacher en utilisant les fonctions hide() et show() de chaque GMarker

La doc de l'api est assez fournie : http://www.google.com/apis/maps/documentat...ce.html#GMarker

Steph.

J'avais vu ce doc mais dans mon cas le PB est que tout les icones sont sous le même GMarkers, à moins que tu connaisses un moyen d'identifier le gmarkers (IconType[chalet]) par rapport aux autres

précisons que je suis nul en javascript et que je n'ai pas de vu global sur le nom des éléments présent dans la page

Cleden

Cleden

Posté
Posté

Salut Papa (ça fait bizarre d'écrire ça :rolleyes: )

Ce n'est pas très poli mais je vais te répondre par un lien qui, je pense, correspond à ce que tu voudrai obtenir.

http://guidetouristique-vendee.fr/googlemap/map2.php

On remarque d'ailleur, que le nombre d'éléments affichés ralenti considérablement l'affichage, des boutons radio seraient peut être plus appropriés que des checkbox.

Je travaille également sur une carte interactive en ce moment et, n'étant pas une bête en javascript, il est plus aisé de s'appuyer sur ce qui est déjà fait (sans tomber dans le plagiat).

Loïc.

  • 2 semaines plus tard...
papa

papa

Posté
  • Auteur
Posté (modifié)
Salut Papa (ça fait bizarre d'écrire ça :rolleyes: )

Désolé mais c'est le seul login dont j'arrive à me souvenir facilement :hypocrite:

Et puis j'ai quand même 3 gamins, ce n'est donc pas complétement érroné :smartass:

http://guidetouristique-vendee.fr/googlemap/map2.php

On remarque d'ailleur, que le nombre d'éléments affichés ralenti considérablement l'affichage, des boutons radio seraient peut être plus appropriés que des checkbox.

Je travaille également sur une carte interactive en ce moment et, n'étant pas une bête en javascript, il est plus aisé de s'appuyer sur ce qui est déjà fait (sans tomber dans le plagiat).

Loïc.

Merci pour ce lien qui est effectivement exactement le type de source que je cherchais.

Bravo au créateur du script très propre

Je vais effectivement m'inspirer de certaines fonctions sans les pomper

Pour ta remarque concernant la rapidité, un petit truc : il ne faut pas faire passer les infos des fenêtres html liees au markers par xml comme le préconise google(beaucoup trop de données trop vite).

Mieux vaut créer une page php qui va repecher ces infos dans ta base et simplement creer un lien dans la bulle qui affiche cette page (Iframe)

Comme ça tu ne fais passer que 4 infos en XML : lat, lng, type de markers et ref d'appel de ta page

j'ai testé sur la page Louer en France et la vitesse de chargement est très honorable pour quelques milliers de location

A bientôt,

Papa

Modifié par papa

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...