Les utilisations de Google Maps au travers d'exemples

nicolas.pied · 5 Septembre 2006

Bonjour,

Voici un article présentant à travers différents exemples, les fonctionnalités de l'API Google Maps. Les principales fonctionnalités de celle-ci sont reprises une à une afin que l'utilisation de cette technologie se répande car comme vous pourrez le constater, son utilisation est assez simple.

Lien vers l'article

En espérant que cet article puisse vous aidez dans vos développements

Serious · 5 Septembre 2006

Excellente introduction.

(( presque le niveau pour faire IA01

))

Fab le Fou · 5 Septembre 2006

Chapeau bas !
Une reco !

nicolas.pied · 5 Septembre 2006

Merci bien ! Si vous voyez des points à ajouter, n'hésitez pas à m'en faire part.

Magic33 · 5 Septembre 2006

Petit exemple de ce que l'on peut faire avec google maps : observation de cétacés. Dommage que je n'ai pas eu ce très bon article sous la main plus tôt, j'aurai moins galéré.

Borower · 5 Septembre 2006

C'est genial merci pour ton article

OTP · 5 Septembre 2006

JE crois que je viens de trouver ce qu'il me fallait pour mon site. Une reco + un favori !

wullon · 5 Septembre 2006

Idem, favori.

Et pour une fois que ça s'appelle "article", et pas "billet" :lol: :arrow:

ltressens · 6 Septembre 2006

Une autre réalisation avec Google Maps API : http://www.mapeo.eu/

nonel · 6 Septembre 2006

Vraiment super Nicolas ton article.
Il va me servir.

Je recommande ! Bravo.

micker · 6 Septembre 2006

salut j'ai lu ton artiscle mais je galere sur le fait de mettre plusieurs marqueurs pourrais tu m'aider ????

nicolas.pied · 6 Septembre 2006

Je viens de rajouter un exemple avec deux marqueurs sur le site ainsi qu'un autre utilisant un tableau JavaScript pour afficher des marqueurs aléatoires. Je pense que cela devrait répndre à tes besoins.

Afficher plusieurs marqueurs Google Maps

cf. Partie "Afficher des marqueurs"

Et merci également pour vos commentaires, ça fait plaisir.

AW · 6 Septembre 2006

Il y a notre camarade kazhou qui a fait un article a ce sujet : http://www.kazhar.org/google-maps/integ ... maps-1.php

C'est la traduction de la doc officielle

nonel · 6 Septembre 2006

Moi, je cherche a créer plusieurs points de repères mais pas forcement centré sur le "point" (le lieu qui s'affiche en premier).

nicolas.pied · 6 Septembre 2006

Après, ce que tu peux faire, c'est de mettre un niveau de zoom assez faible afin de visualiser la majorité de tes points.

micker · 6 Septembre 2006

alors je continu a me battre !!!
pour les 2 points j'y arrive maintenant je capte pour mettre 2 infobulles
qqun pour m'aider ?

Code:

    //<![CDATA[
       function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
       	map.openInfoWindow(map.getCenter(),document.createTextNode("cliquer sur le marqueur"));
		
		//declaration des points
		var bbb = new GLatLng(43.624644, 1.448221);
		var renan = new GLatLng(43.63672,1.441054);
		//centrer la carte
		map.setCenter(bbb, 13);
		 /* Tableau de GInfoWindowTab qui va contenir les onglets de l'info-bulle*/
    var infoTabs = [
        new GInfoWindowTab("Onglet #1", "Le contenu de l'onglet 1"),
    ];
       /* Enregistrer un listener lors d'un clic sur le marqueur */
    	GEvent.addListener(marker, "click", function() {
        /* Lors d'un clic, afficher les onglets */
        marker.openInfoWindowTabsHtml(infoTabs);
    });
    /* Attacher un marqueur au point "point" demandé */
    map.addOverlay(new GMarker(bbb));
    map.addOverlay(new GMarker(renan));
	marker.openInfoWindowTabsHtml(infoTabs);
	  }
    }
    //]]>

help me svp

nicolas.pied · 6 Septembre 2006

Voici ta réponse :

Lien vers l'article

Au niveau de la rubrique "5 - Attacher des évènements JavaScript" dans le deuxième exemple.

Pour infos :
Un marqueur est associé à un et à un seul point, il en est de même pour les info-bulles.

En espérant avoir répondu à ta demande.

micker · 6 Septembre 2006

c'est la grande classsssss super !
sinon une derniere question
c'est possible de faire comme google map avec dans l'info bulle la possibilité de faire un itinéraire ?

Mille Merci

Rackham · 6 Septembre 2006

Simple exemple permettant d'afficher différents lieux de Paris avec juste le zoom de disponible http://www.baudelet.net/satellite.htm

nicolas.pied · 6 Septembre 2006

Je veux pas m'avancer, mais je ne pense pas qu'il soit possible de tracer des itinéraires avec Google Maps et en quelques sortes heureusement pour les sites comme Mappy et ViaMichelin (cela leurs fait des concurrents en moins)

micker · 6 Septembre 2006

si tu test ds google tu peus demandr l'itineraire au niveau d'un marqueur....

nicolas.pied · 6 Septembre 2006

Oui, mais là c'est du code propriétaire à Google et je pense pas qu'il le mette à disposition. Enfin, je dis bien "penser", je n'en suis pas sûr... mais presque lol. D'ailleurs leur API n'en fait pas référence.

nonel · 6 Septembre 2006

nicolas.pied a dit:
Voici ta réponse :

Lien vers l'article

Au niveau de la rubrique "5 - Attacher des évènements JavaScript" dans le deuxième exemple.

Pour infos :
Un marqueur est associé à un et à un seul point, il en est de même pour les info-bulles.

En espérant avoir répondu à ta demande.

rooo ! Trop bien !
Exactement la question que je me posais !
Ton petit tuto va me permettre de faire un truc que je voulais faire depuis longtemps !
Un grand merci.

Après toutes ces accolades ... petites questions quand même.
Comment fait on pour insérer une lien web qui s'ouvre dans une nouvelle page ?
Parce que des que tu balances les // ça débloque

nicolas.pied · 6 Septembre 2006

Comment ça ? A la fin du document ?

Un peu comme ça ?

Code:

...
]]>
</script>
<a href="https://www.google.fr" target="_blank">Google</a>

</body>
</html>

Sinon, entre les balises <script> et </script>, c'est du javascript donc les caractères "//" correspondent à du commentaires.

nonel · 6 Septembre 2006

nicolas.pied a dit:
Comment ça ? A la fin du document ?

Ah ben non ... quand meme pas, je sais faire un lien merci

A l'intérieur du code //<![CDATA[

Quand je met une info bulle a un point choisi. Dans la description je voudrais faire un lien cliquable.

Code:

createInfoMarker(point, "LIENS");

nicolas.pied · 7 Septembre 2006

Cette info-bulle peut contenir du HTML, ainsi il suffit de faire :

Code:

createInfoMarker(point, '<a href="https://www.google.fr" target="_blank">Google</a>');

Il est aussi possible d'y mettre des images, et bien d'autres choses à partir du moment où c'est du HTML.

nicolas.pied · 7 Septembre 2006

J'ai modifié le dernier exemple pour que tu puisses juger de toi même.

jeroen · 7 Septembre 2006

Je ne résiste pas à vous présenter mon boulot pour donner d'autres idées d'application. Si vous voulez quelques explications, clic droit > afficher la source :wink:

Carte de sommets sous G.Maps : ici

La même sous Google Earth : ici

Autre exemple sous Google Earth avec positionnement automatique : ici

nonel · 7 Septembre 2006

nicolas.pied a dit:
Cette info-bulle peut contenir du HTML, ainsi il suffit de faire :

Code:

createInfoMarker(point, '<a href="https://www.google.fr" target="_blank">Google</a>');

Il est aussi possible d'y mettre des images, et bien d'autres choses à partir du moment où c'est du HTML.

Magnifique !
C'est impeccable ! Merci.

Sympa ton boulot jeroen.

beber24 · 8 Septembre 2006

J'ai intégré Google map dans mes annonces :

http://www.promo-location.com

Ca ce marche malheureusement pas pour toutes les communes... et certaines communes voir de nombreuses ne sont pas centrées... J'espère que celà va s'améliorer

nonel · 10 Septembre 2006

Re-Bonjour,

Bon, tout est clair et limpide dans ma tête.
- impeccable pour faire plusieurs points.
- Nickel pour les infos bulles
- Et parfait pour les onglets.

Mais si je pousse le vice plus loin !
J'aimerais afficher plusieurs infos bulles avec des onglets chacunes.

En fait j'ai du mal a saisir le code de l'onglet. Et dès que j'essaye de coller 2 fois le code, ca débloque.

nicolas.pied · 11 Septembre 2006

Proposes un exemple de ton problème ici afin que l'on puisse regarder ce qui ne va pas.

Pour sûr, si tu veux un contenu différent pour chaque onglet, tu vas avoir besoin d'un tableau qui va contenir les différentes chaînes ou structures de points (avec coordonnées, chaine textuelle, etc.)

nonel · 11 Septembre 2006

nicolas.pied a dit:
Pour sûr, si tu veux un contenu différent pour chaque onglet, tu vas avoir besoin d'un tableau qui va contenir les différentes chaînes ou structures de points (avec coordonnées, chaine textuelle, etc.)

oula !!! C'est que ca à l'air compliqué tout ca ton histoire de tableau et de chaînes !
Je sais pas si je vais container la dedans alors !
Les fenêtres à onglet unique peuvent tout a fait m'aller.

Sinon, mon projet est assez simple.

Je répertorie des lieux que mes visiteurs ont étudié et via un formulaire, il m'envoie un fichier PDF de leur étude et différentes infos, comme les coordonnées et d'autres détails.
Je voudrais faire 2 niveau d'informations quand on surf sur Gmap.
Le premier onglet décrit succinctement l'étude, et l'autre onglet donne plus de taille avec notamment un lien pour aller télécharger le fichier PDF.

Voila, c'est tout.

nicolas.pied · 11 Septembre 2006

Et les informations au niveau de GMap sont persistantes ou pas (enregistrées ou non sur le serveur) ?

nonel · 12 Septembre 2006

nicolas.pied a dit:
Et les informations au niveau de GMap sont persistantes ou pas (enregistrées ou non sur le serveur) ?

Heu .... vous pouvez répéter la question !

Les infos de Gmap sont écrites sur mon fichier, intégré dans le script de gmap ... comme tu le décris dans ton tuto.

Mister_G · 12 Septembre 2006

bjr,

Des développeurs Xoops ont créé un module Maps dans leur CMS; voici un exemple : Simply-Maps

nonel · 13 Septembre 2006

Ah ! Exactement ce que je veux faire !
Je vais etudier leur code ! Merci G

sebastien97 · 14 Septembre 2006

Chargement en deux temps

Bonjour à tous,

Voila, après avoir lu vos articles et fait mes propres pages de google map, je bloque sur un point (petit point mais tout de même !).

Voila, j'ai placer des images pour des point donné, et lors de l'overture de la page google map charge bien la carte mais pas les images (mes vignettes), et si je vais sur la page précédante (avec mon browser) puis je reviens sur ma page (carte) les vignette apparaissent alors.

Donc le chargement ce fais à la seconde visite...

No entiendo...

Voila ce que je place dans mon Body...

<body onload="load()" onunload="GUnload()">

puis

<div id="map" style="width: 500px; height: 500px"></div>
...!!!

Ma page test ...
www.tropical-pictures.com/mapgoogle4.php

KelK'1 à 1 ID...?

Séb

nicolas.pied · 15 Septembre 2006

Pour moi, tout à l'air de fonctionner normalement ; je visualise bien les deux types d'icônes (FR et GB) ainsi que les info-bulles.

nonel · 15 Septembre 2006

Re: Chargement en deux temps

sebastien97 a dit:
Voila, j'ai placer des images pour des point donné, et lors de l'overture de la page google map charge bien la carte mais pas les images (mes vignettes), et si je vais sur la page précédante (avec mon browser) puis je reviens sur ma page (carte) les vignette apparaissent alors.

YEs ! J'ai la solution !

Sous FF, ca marche nikel puisque tu n'a pas besoin de definir la taille de la nouvelle icone.
Par contre sous I.E, et bien tu es obligé de définir ce parametre. Sinon tes images apparaissent, mais de la taille d' 1 pix.

Alors, quand tu determine les variable de tes icones, il faut que tu rajoutes un ligne pour sa taille.
Comme ca :

var baseIcon = new GIcon();
baseIcon.iconAnchor=new GPoint(16,32);
baseIcon.infoWindowAnchor=new GPoint(16,0);
baseIcon.iconSize=new GSize(20,12);

sebastien97 · 15 Septembre 2006

Icone Ok

Yes, c'est exact, un petit probleme de navigateur qui ne comprends pas tout encore, enfin il faut juste bien poser les choses, et c'est normal après tout...Ta solution fonctionne très bien...

Mes icones s'affichent correctement, elles ont la même tailles mais je voulais pas la suite mettre diverse icone avec ayant des tailles différentes, comme des icones de Surf pour les bon Spot etc...

C'est possible d'initialiser des types de tailles...?

Séb,

nonel · 16 Septembre 2006

Re: Icone Ok

sebastien97 a dit:
C'est possible d'initialiser des types de tailles...?

J'y ai pas réfléchi ... mais je pense que ça doit être possible.
Il faut peut être essayé de faire plusieurs variable Gicon et a chaque icône tu y attributs une taille différente.
Si tu as le temps de te penche sur les test ... je veux bien que tu nous file le bout de code après.

Sinon, j'ai réussi à faire ce que je voulais, c'est a dire, plusieurs points avec plusieurs onglets.
Bon graphiquement c'est pas du tout au point, c'est pas la priorité ... mais les codes sont là : Voir mon Atlas Paysager

Chose bizarre aussi ... sous FF, je n'ai aucun problème, mais sous IE ... il plante tout le temps lorsque j'essaye de l'intégrer a mon CMS.
Alors je bidouille ... mais c'est pas très satisfaisant. Si kkun a réussi a intégrer google map dans nuke je suis preneur.

Edit : J'ai lu sur le forum (mais j'ai perdu le sujet), que le nombre maximum de point que l'on pouvait mettre etait a autour des 200 marqueurs ! Qu'en est t'il de cette limite ? Est ce toujours d'actualité

sebastien97 · 18 Septembre 2006

taille icone google map

Merci pour la réponse, je vais préparé des tests et si c'est concluant, je placerai la sources dans ce Forum...

Séb,

OTP · 7 Octobre 2006

Je me suis enfin lancé dans l'ajout des Google Maps sur mon site et voici le résultat de mes premiers essais :

-http://www.thewindpower.net/30-europe-eolien.php

Ca m'a permit d'ajouter à la sélection alphabétique des pays une vue carto, que j'apprécie pas mal.
Ensuite, je le ferai sur la France où il y aura alors plusieurs dizaines de plots ; le gain en lecture sera évident.

En bref, tout ça pour dire que c'est très simple à mettre en place (j'y suis arrivé !), efficace et que ça vaut le coup...

jeroen · 7 Octobre 2006

J'ai un peu fait mumuse avec l'outil, je vous laisse apprécier le résultat :
-http://www.skitour.fr/maps/gpx_1969.html (itinéraire GPS)
-http://www.skitour.fr/maps/sommets.php?massif=Belledonne&carte=1 (carte)

Vous trouverez aussi des liens vers GoogleEarth

Djclone · 30 Janvier 2007

Un exemple de plus de la google maps api

C'est un peu du déterrage de post mais pour voyager dans le passé de votre ville au travers des cartes postales anciennes la google maps api est ce qu'il vous faut:

Visiter la ville de Colombes au travers des cartes postale

L'exemple est simple mais parlant. Le lien est donc maintenant soumis à la vindicte des forumeurs de Webrankinfo. Des améliorations à apporter ???

Cdlt,

julien731 · 4 Novembre 2010

Génial ! Merci mille fois pour cet article qui est très bien réalisé, simple et fonctionnel ! Je viens d'économiser des heures de recherche !