Forum Portail Vacances

le-sarde · Posté le: Mer Sep 05, 2007 1:16 pm Sujet du message: google map en html

Salut Zalf,

je voudrais mettre (comme toi Wink

), sur mon site, une page avec google map.

J'ai créé un compte et informé "mes pages". Ce que j'arrive pas à faire c'est un menu avec une sélection (lieux, commerce, hotel....), ainsi qu'y ajouter la liste sur le cotés.

Peut tu me dire comment tu as fait?

Merci

++
_________________
La Sardaigne, vous connaissez?
Sarde et fier de l'être.
La galerie Photos

admin · Administrateur Inscrit le: 17 Oct 2006 Messages: 114

Salut le-sarde!

Cela faisait longtemps! Fini les vacances?

Pour google map, je te conseille d'y aller par étape. On va bosser ensemble si tu veux et même faire un petit tutoriel en même temps. Cela intéresse pas mal de personnes en ce moment!

Je te propose de faire une page test et de mettre le lien ici. On pourra ainsi bosser sur tes codes.

Pour ma part, j'en suis là et je suis assez fier du résultat : http://www.portailvacances.com/site/certification/carnets-voyages/venise/Pour-en-savoir-plus-venise.php

Tu remarqueras que depuis aujourd'hui, il y a un changement de couleur quand tu survoles un marqueur!

Pour ceux qui sont intéressés, et qui veulent nous rejoindre, voici la première étape à faire (voir post suivant)
_________________
Webmaster du site PortaiVacances
http://www.portailvacances.com

admin · Administrateur Inscrit le: 17 Oct 2006 Messages: 114

Pour utiliser Google Maps, vous devez déjà créer un compte sur google ici : https://www.google.com/accounts/ManageAccount

Puis obtenir une clef API pour pouvoir utiliser GoogleMaps sur votre site ici : http://www.google.com/apis/maps/signup.html

Se rendre en bas de la page puis :

1 : Cocher la case " I have read and agree with the terms and conditions"

2 : Inscrire l’URL (adresse) de votre site.

3 : Cliquer sur " Generate API Key" pour obtenir votre clé API

Vous recevrez une page HTML qui comprendra :

* Votre code API

* L ’URL de votre site
_________________
Webmaster du site PortaiVacances
http://www.portailvacances.com

admin · Administrateur Inscrit le: 17 Oct 2006 Messages: 114

Dans toutes les pages où vous voudrez mettre une carte Googles maps, vous devrez définir en premier les codes donnés lors de votre inscription.
Ces codes doivent se trouver entre les balises <head> et </head>

Exemple :

le-sarde · Posté le: Jeu Sep 06, 2007 10:56 am Sujet du message:

Très bonne initiative.

Voici donc l'url de mon site avec google-map.

La 1ere, j'ai simplement copier-coller le lien que me donne le site google-map : http://lesarde.free.fr/sarde/google-map-le-sarde.html

La 2eme, c'est en cours puisque je vais suivre ton tutorial. Pour le moment il n'y a que le script avec la cle.

++
_________________
La Sardaigne, vous connaissez?
Sarde et fier de l'être.
La galerie Photos

admin · Administrateur Inscrit le: 17 Oct 2006 Messages: 114

J'ai vu ta page le-sarde et le module que tu as utilisé est tout nouveau. Il permet de mettre rapidement une carte Google maps sur son site sans rien connaître à la programmation. Très bien mais si on veut aller plus loin et personnaliser sa carte, je pense que tu vas devoir suivre ce post.

Voila la suite :
Pour insérer une carte, il faut déjà créer une zone pour l'afficher. Nous allons le faire dans une balise Div qui aura le nom "map"et qui doit se trouver entre les balises <BODY> et </BODY>

le-sarde · Posté le: Ven Sep 07, 2007 4:06 am Sujet du message:

Quoi!? C'est tout!!!!???

Plus vite, plus vite!!!

Wink

_________________
La Sardaigne, vous connaissez?
Sarde et fier de l'être.
La galerie Photos

admin · Administrateur Inscrit le: 17 Oct 2006 Messages: 114

Voila voila, la suite arrive!

Il y a plusieurs options pour mettre des curseurs sur une carte :

"GSmallMapControl()" qui permet d'avoir les 4 flèches de direction plus un petit zoom

"GLargeMapControl()" qui permet d'avoir les 4 flèches de direction plus un grand zoom

"GSmallZoomControl()" qui permet d'avoir un petit zoom seulement

"GScaleControl()" qui permet de mettre une échelle sur la carte

"GMapTypeControl()" qui permet d'afficher trois possibilités d'affichage de la carte (Normal, Sattelite ou mixte)

"GOverviewMapControl()" qui permet d'afficher une mini carte dans le coin inférieur droit

La fonction qui permet d'afficher ces options est : "map.addControl". Voici donc ce que nous allons rajouter à notre exemple :

le-sarde · Posté le: Dim Sep 09, 2007 9:48 am Sujet du message:

Salut,
Question pour les "null".
j'ai bien compris l'utilité des fonctions, mais je ne sais pas où je dois les insérer.
Pourrais-tu donner un exemple de code complet avec ces fonctions integrès?

++
_________________
La Sardaigne, vous connaissez?
Sarde et fier de l'être.
La galerie Photos

admin · Administrateur Inscrit le: 17 Oct 2006 Messages: 114

Salut le-sarde,

Premièrement, désolé si le cours va prendre un peu de retard, mais j'ai ma livebox qui a flashé hier soir. Pas de réparation avant mercredi mais j'ai des petites combines comme le Mac Do Razz

qui me permettront de rester un peu présent.

Pour les codes, va sur les cartes du tutoriel (ex : http://www.portailvacances.com/Tutoriaux/google-maps/google-maps4.php), fais un clic droit et "code source de la page". Essaye en attendant comme cela. Sinon, quand je suis de nouveau présent, on rentre plus dans le détail.

Bonne journée à tous
_________________
Webmaster du site PortaiVacances
http://www.portailvacances.com

admin · Administrateur Inscrit le: 17 Oct 2006 Messages: 114

Comme j'avais fait cela hier soir avant mon black out internet, je le post de suite :

Voici la fonction qui permet de faire un zoom directement avec la molette de la souris : "enableScrollWheelZoom()"

La fonction qui permet d'utiliser le pavé numérique est : "GKeyboardHandler()". Vous pouvez tester les flèches pour un déplacement lent, les touches "+" et "-" pour le Zoom et les touches page haut/bas et home/fin pour un déplacement rapide. Voici le code à rajouter aujourd'hui :

le-sarde · Posté le: Lun Sep 10, 2007 9:21 pm Sujet du message:

Ok j'ai compris pour les codes.

Par contre il n'y a toujours rien qui s'affiché. C'est normal (car tu n'as pas donné le code d'affichage), ou je me suis planter quelque part?

++
_________________
La Sardaigne, vous connaissez?
Sarde et fier de l'être.
La galerie Photos

admin · Administrateur Inscrit le: 17 Oct 2006 Messages: 114

Salut le-sarde,

Essaye cela. Modifie ta balise <BODY> par <body onload="load()" onunload="GUnload()">
_________________
Webmaster du site PortaiVacances
http://www.portailvacances.com

le-sarde · Posté le: Mar Sep 11, 2007 8:59 pm Sujet du message:

Salut,
y un mieux, mais c'est pas encore ça.

ma page : http://lesarde.free.fr/sarde/google-map-zalf.html

sur la page google-map-le-sarde, quand je fais actualiser, la carte n'apparait plus. Tu sais à quoi c'est dù?

++
_________________
La Sardaigne, vous connaissez?
Sarde et fier de l'être.
La galerie Photos

admin · Administrateur Inscrit le: 17 Oct 2006 Messages: 114

Salut le-sarde,

De retour de congé? Tu étais où si ce n'est pas indiscret?

Bon, il va falloir que l'on reprenne ce tutoriel et que l'on regarde de prêt ton problème d'affichage! j'ai commencé à regarder mais ta méthode de développement est différente de la mienne car je travaille plus avec les cadres. Mais no soucis, on va y arriver!

Bonne soirée
_________________
Webmaster du site PortaiVacances
http://www.portailvacances.com