Tutoriel jQuery : Google Maps API V3

salut et bienvenue dans un nouveau tutoriel consacré à l’utilisation de l’api javascript google maps google maps vous connaissez à peu près tout ça parce que ça permet d’insérer par exemple rapidement et simplement une carte sur son site mais ce que vous savez peut-être pas c’est qu’il ya une api qui vous permet d’interagir justement avec cette carte est de faire des opérations un peu plus complexe que juste ma vie donc nous aujourd’hui en voir une de ses utilisations donc c’est un exemple qui peut arriver pas mal de fois sur des projets donc c’est un système qui fonctionne en deux temps donc d’abord un back office qui permet à l’administrateur de placer des événements donc de placer de manière visuelle à de géolocaliser des événements particuliers donc il va placer différents points dans une ville pour y associer des événements et ensuite dans le front office en aura une grande carte où on aura différents petits marqueur et chaque marque heures quand on va cliquer dessus va afficher l’événement qui associe donc c’est un truc qui fonctionne plutôt pas mal pour l’événementiel et donc on va voir comment faire ça donc là pays est actuellement la version 2 3 donc si vous regardez plus tard un futur et que c’est passé à version 4 ben tant pis mais voilà on va faire ça avec la pays version 3 donc pour trouver le cette page là c’est très simple vous allez sur google vous cherchez google maps api vous cliquez là vous avez tous les toutes les api donc nous on va prendre celle en javascript et vous retombez sur la page où j’étais donc là pays n’existe pas encore en france est forcément donc vous allez devoir vous mettre un mais bon c’est pas un truc dramatique c’est assez clair donc vous allez tout de suite dans la documentation mais on va avoir pas mal de pas mal de choses donc ça c’est important elle lorsqu’on est développeur on n’est pas figé c’est à dire qu’on sait pas tout faire et on sera sûrement jamais mail avantage c’est qu’on peut apprendre à essayer en utilisant justement des api qu’on va pouvoir progresser donc là je vais partir de ce principe là c’est à dire je ne connais rien je sais pas du tout comment utiliser cette api là et on va voir comment utiliser leur documentation pour arriver à s’en sortir donc la première chose à faire c’est de voir un peu comment elle fonctionne donc on note tout ce qui est là qui sont des petits textes qui vont vous permettre de mettre un peu les pieds dans le plat vous avez basics et tutoriels qui sont pas mal qui sont relativement simples qui vous montre des exemples de code et leurs effets en général c’est plutôt efficace donc vous lisez ça si vous avez besoin ensuite vous avez là pays en référence donc ça c’est le truc brut de brut où on aura chaque objet et leur définition donc c’est une très très longue page où on a le nom de l’objet ces constructeurs ses méthodes et ses propriétés ça on verra on y reviendra qu’on aura vraiment des cas spécifiques et ensuite ces deux catégories qui sont plutôt plutôt sympa les démos donc là pas mal de démonstration et la galerie de démo donc bon je sais pas pourquoi ils ont séparé les deux ou là vous avez des cas concrets un peu plus avancé que les symptômes donc on va rester sur sans punch point mort donc nous on va créer notre back office donc moi j’ai déjà fait un peu toute la partie cash que je voulais vraiment concentré sur la partie javascript donc globalement j’ai des events dans la base de données qui ont un nom une latitude et une longitude donc ça c’est important d’avoir ce couple là qui va nous permettre d’identifier la localisation d’un événement et ensuite j’ai configuré un peu tout le monde paye php pour qu’il affiche au moins deux formulaires là j’ai utilisé à console je leur ai rien fait de particulier j’ai lié juger laissez quelques tâches qui générait tout ça je vais supprimer tout ce que j’avais déjà fait voilà globalement vous devriez vous retrouvez avec ça donc là j’ai mon système qui me permet de voir les événements et je vais ajouter 1 et je veux pouvoir placer grâce à la carte mais pointent d’abord ce que l’on va devoir faire ses lancers la pays et pouvoir l’utiliser donc pour cela on a besoin de deux choses donc d’abord vers m finalement les codes voilà on a besoin de 2 url donc moi je vais apporter jquery bon se promener besoin perso et ensuite je vais importé l’apei de google donc ça c’est important vous l’importez elle est donnée en général dans tous les temps tous les exemples donc là j’ai trouvé cet exemple qui se trouve ici geo coding simpl si vous affichez le code source tout de suite tout en vous verrez là mais murray donc attention vous avez un point d’interrogation sensor égale folz donc si vous mettez falls c’est normal si vous mettez trou ça vous permettra de d’utiliser la géolocalisation qui permettent d’automatiquement mettre la carte sur le lieu où vous êtes s’en verra pas ça aujourd’hui on verra ça peut-être plus tard dans un autre tutoriaux et ensuite on va pouvoir mettre notre script à neuf donc la personne va remplir ce chant et lorsqu’elles veulent quitter ce champ automatiquement on se centrera la pays enfin un centre ras la map mais sur le point qu’il a choisi donc avant de commencer déjà qu’est ce qu’on va faire on va placer cette carte donc c’est important d’avoir une dire

qu’à une idée particulière donc peu importe les idées j’ai mis ma forme va pour suivre les exemples vous pouvez mettre changé j’ai maps ou google maps mon peu importe ça ça va nous permettre en fait de placer le canevas de la carte à l’intérieur donc pour utiliser la pays donc on va déjà attendre que j qu il soit chargée ça vous n’êtes pas obligé vous n’êtes même pas obligé d’utiliser j’y connais moi je le fais juste parce que j’ai l’habitude et parce que ce sera plus simple pour interagir avec les autres éléments de la page donc pour créer une carte c’est très simple bon je crée une nouvelle variable et je fais google.com maps donc tous les objets quasiment se trouvant ça et c’est toujours google points 9 points l’objet point map le premier paramètre c’est l’élément où on va insérer la carte comment je sais ça m est simple vous allez dans la pays référence jugant l’apei moi j’appelle ça comme ça vous cherchez map je crois que ces premiers mois là et ici on vous le dit map vous donner la dives et les options les options c1 c’est tout ça il ya pas mal d’options à définir et donc je vais faire ça nous coûte donc l’élément ces documents ce point getelementbyid et mon heidi c’est jemmapes voilà pourquoi je vous demande est d’avoir une idée bien précis et ensuite les options donc les options pour les déclarer comme ça où vont créer une variable pour les stocker si on veut l’utiliser plusieurs fois vous là je vais faire directement donc d’abord le zoom qu’il faut quasiment tout le temps définir là on va mettre ça va entre zéro et qu’elle qui est 12 je sais plus trop donc on va mettre dix on va adapter juste après ensuite on a besoin de centrer la map sur un lieu précis alors là j’ai plus trop d’idées de lieux donc ce que je vais faire alors pour la latitude et la longitude on va utiliser un autre objet qui est l’objet de latitude longitude qu’est ce que c’est original donc c’est un objet qui s’appelle alors faire google pointe map maps point de lattes lng voilà son constructeur ça prend deux shih de nombre en fait qu’ils sont à la latitude et la longitude donc nous on va se déclarer en amont lattes lng égale google point maps point la télé jay et donc les deux chiffres gelée copie-colle parce que je les ai cherchés – mc et la latitude longitude de la ville de montpellier donc on pourra par exemple plus tard utiliser la géolocalisation pour automatiquement m l’admin un endroit précis donc là ça devrait suffire donc j’ai la tmg est ici je vais le déclarer comme ça donc comme ça je vais pouvoir centrer la carte là où j’en ai ensuite on peut donc ensuite si vous revenez sur la propriété de maaf alors ça c’est plutôt mal fait j’ai pas trouvé d’endroit qui permet de remonter en haut de la page dans la 1ère partie map ma pub chance donc vous voyez ici à ricouart donc le zoom était bien nécessaire le centre est nécessaire c’est chiant rico elle voilà ma petite heidi on nous le demande donc je veux aussi le définir donc ma petite heidi est ici vous voyez que c’est un objet de type peuvent-ils pas dis donc vous regardez et voilà on va prendre rotman vous recopiez ça et vous mettez point road map voilà donc ça c’est comment on lit la doc après évidemment là je fais pas à pas mais on peut aller beaucoup plus vite une fois qu’on connaît les objets je vous rassure donc map est placée et lavage oublier le petit nous par contre est ici toujours venu aussi voilà donc non ça ça devrait initialiser la carte si je me suis pas trompé alors forcément ma carte elle va peut-être ce crémant l’aveyron même pas il faut le faire dans une d’yves sur laquelle on a précisé deux éléments particuliers de la largeur et la largeur la largeur et la hauteur 8 on va mettre du 400 nous sommes pour s’en aller et eight 700 350 j’espère que ça va marcher voilà donc là vous voyez que la dives et bien mais je vais me bellemare et l’inspecteur pour voir un peu edit l’hymne 19 pratique ça donc au démarrer

l’inspecteur donc si vous allez faire au bug ou si vous êtes sur chrome utilisent vraiment l’inspecteur ça va vous permettre de localiser vos erreurs sinon vous avez vraiment pas vous y retrouver alors effectivement je me suis trompé dans le nom de ma fonction ça doit être en majuscules ici c’est là tu l and g là tu es lng avec un l majuscule donc ça c’est important quand vous copier coller de pas vous tromper voilà donc là haut up là haut mais trop vite voile est bizarre super alors c’est sûr manger à cesser ce qu’un piètre de sumo peu importe donc là vous voyez que j’ai bien la carte qui commence sur la ville de montpellier donc je vais diminuer la largeur g m donc maintenant sur cette carte là je veux pouvoir faire en sorte donc là ce que je veux faire c’est taper mon adresse et lorsque je sors du champ on pourrait faire mal et lorsque j’appuie sur entrée automatiquement ça change et ça me bouge la carte pour la placer à l’endroit où je veux jouer allez donc ici je vais faire cette partie un javascript donc récupérer mon champ ici je vais directement utilisés l’inspecteur pour récupérer son idée vu qu’il est automatiquement généré temps montre un work voilà point qu’hier yep qui pressent fonctionnent eux alerte e.sy code je crois que c’est un truc comme ça et on retourne falls on va tester ça tout de suite je te lis ma page tout le temps forcément c’est pas la bonne chose à rajouter l’événement plus test c’est qu’ils presse comme ça je vais détecté à calmont appuyez sur entrée donc la touche numéro 13 if le point qui paie qui codent égalé galles 13 et là on va pouvoir faire notre petite opération sur la google map donc on va utiliser l’objet géo codeurs donc j’ai aux codeurs on va le déclarer un à mon histoire qu on y est axé tout le temps et que ce soit toujours le même objet que l’on touche donc ça c’est important d’apporter des variables si je déclare un vari si il sera accessible que dans cette fonction donc c’est pas très pratique donc je vais déclarer un nouveau géo codeurs donc le géo codeurs c’est ce qui permet en fait à google de transposer une adresse en en coordonnées de latitude et longitude et inversément c’est dire que si je lui donne latitude et de longitude il serait capable lui de me donner paix les lésés comment dire ça les adresses où les choses qu’il ya à proximité donc ça c’est un objet que vous allez voir assez souvent lorsque vous utilisez la pays qui est vraiment vraiment très utile donc google maps point g aux codeurs voilà donc ce que l’on va faire c’est récupérer la valeur du champ donc la valeur du champ ses vices points valdes a tout de suite en gégory c’est beaucoup plus simple donc le jeu aux codeurs il a une fonction miracle et c’est la seule fonction pilat qui s’appelle géo code qu’on y retourne donc gelé vu dans cet exemple là mais pour montrer aussi comment utiliser la pays qu’on fait google point maps point g au code voilà c’est cette fonction la plus tôt cette méthode là qui prend une requête qui est un objet qui a ses propriétés là et qui reste tout qui retourne un résultat qui un lui ses propriétés là donc on va servir un peu de tout ça donc jour ce donc le géo codeurs c’est parti je lance donc j’ai aux codeurs point g au code le premier paramètre c’est un petit objet donc cet objet je vais directement déclaré justin à mon histoire qu’ils soient plus simple à que le code soit plus simple à lire donc on va lui faire passer un paramètre l’adresse et c’est l’adresse tout simplement qu’on aura tapé donc c’est comment s’appelle

la cedh et de leur fils val voilà donc cet objet là je lui ai fait passer à manger aux codes donc c’est la première partie et la seconde partie c’est une fonction qui prend deux paramètres le résultat et le statut donc le statut qui va nous permettre de gérer les erreurs de nous dire si il ya un problème ou quelque chose comme ça et ensuite cette fonction elle va faire tout un petit système donc là je vais juste faire alerte statut pour vous montrer que ça retourne quelque chose ou que plat je retente sûrement ma page j’actualise ça c’est vrai que c’est chiant pour actualiser pas mal de points là vous voyez hop une petite erreur ligne être donc j’ai oublié où j’ai dû mettre un pour réguler ce n’est pas lieu d’être voila voila laisser le débogueur active et ça va nous être utile ici je fais toulon j’appuie sur entrée j’ai oublié le return false return false du coup il a posté le formulaire en même temps c’est génial donc je réédite jeu top en adresse toulon j’appuie sur entrée donc là j’ai le statut et on me dit ok donc ça veut dire qu’il a bien trouvé une adresse voilà donc la automatiquement le alerte elle est un peu bizarre c’est vrai que bon je rince crypte moi je suis pas fan mais sa fille vous convertissant en string alors que ça c’est un objet statut c’est bien ce qu’on voit ici dans la pays j’ai rapprocher l’anglais parce que j’en ai marre d’aller en anglais l’autre c’est ça c’est google point maps points joe cocker statut points ok du coup on n’a plus qu’à tester si le statut est bon donc statut égal égale google maps points joe cada ouais ok dans ce cas là on va pouvoir récupérer mais notre notre notre position donc la position le récupère grâce au tableau résulte donc résultats envoient plusieurs résultats qui sont normalement je crois les points qu’ils trouvent aux alentours donc nous ce que l’on va faire c’est comment récupérer le premier donc résulte 0 alors je sais pas si donc la bon j’ai fait en alerte résultent mais à mon avis connaissant la capacité limitée du alerte 6ème juste me retournais object ou rails avec un peu de chance allez toulon voilà super donc ça c’est encore du développent super utile donc bon clairement résulte c’est un objet qui contient tous les résultats donc je sais pas s’il ya plus d’infos sur la doc voilà donc en bref il retourne un tableau en gens sortent de ji sun donc bon ils sont pas très claires sur saint ange iphone like qui contiennent toutes les positions en vain qu’il trouve aux alentours donc tout ce que l’on va utiliser pour récupérer la lande la logique nous c’est qu’on va utiliser pour retourner la longitude et la latitude et la longitude donc c’est très simple ce que l’on fait donc on fait résulte zéro point géométrie point l’occassion donc ça sorte un objet de ce type là ne l’at-elle ng qui bat contient la latitude longitude du point sur lequel j’ai cliqué au final donc ici on voit du coup pas faire grand chose on va juste de bouger la carte donc en faisant un appoint 7 center de sa voix là et ici si j’actualise joe réactualise vous voyez que j’appuie est automatiquement il recentre la carte sur toulon donc là au passage le zoom est un poil trop loin mais bon on verra ça plus tard mais un zoom à huit c’est plutôt sympa donc voilà ça c’est la première partie mais non je vais y placer mon fameux marqueur donc le marqueur c’est très simple donc je vais placer mon marqueur et je vous le placez au début pour commencer au centre de ma carte puis si je vais créer un nouvel objet marqueur égale new google point maps points marqueurs là ils se sont pas trompés sur le dance est plutôt simple alors là j’ai donc la pensée c’est toujours majuscule en début de mots pour toutes les fonctions de l’api google qu’il mette pas là il n’est pas là mais il met dans les méthodes donc pensez-y ses erreurs que j’ai faites au début donc il faut vraiment y penser tout le temps donc pareil le marqueur il prend plusieurs propriétés donc d’abord la position du petit marqueur c’est très simple c’est la télé est la variable que j’ai défini donc dans l’est on va voir un peu tous les arguments du marqueur parce qu’ils sont précisément tous intéressants donc

tout ce qu’ on a cliquable est-ce qu’il doit être câbles non dans notre camp va rien et c’est en à l’icône donc ça ça peut être utile on peut préciser l’icône a placé à la place de l’école classique donc faudra faire attention et tout ce qui est des contours si vous étiez image différente donc nous on va pas l’utiliser ensuite en à main map donc ça c’est obligé c’est la map sur lequel on va placer ce marqueur voilà donc ça fait mal de points mais c’est pas grave ensuite on a le titre c’est quand on passe dessus parce qu’il est visible donc là forcément il est visible c’est con mais c’est comme ça et donc le titre en a peut être qui te bouger ce curseur voilà donc là je vais actualisée du coup ma petite âge et normand vous allez voir en plein centre de ma carte voilà j’ai mon curseur donc ce curseur je veux pouvoir le pouget donc heureusement il ya un super m’attribue drague à bhl qui nous permet si je le mets sur true de bouger mon petit curseur donc toi donc le bouger c’est pas tout faux ensuite écouter à quel moment ça à faire quelque chose donc on va voir ça de suite bien je vais vous montrer un peu le bouger si je clique dessus voiliers se lève et je peut leur poser ailleurs il ya de la petite animation sympa qui était pas avant donc on peut zoomer le curseur et lui va pas vous lever et on peut placer les événements soit carte donc on continue ici thomas gable trou donc je vais tout laissé et je vais avoir besoin est donc maintenant je vais avoir besoin d’écouter le mouvement de ce curseur là si je remonte vous avez tous les événements liés au curseur d’envoyer il y en a plein et nous on en a trois qui nous intéresse donc drague drag and track start donc je pense qu’il ya pas besoin d’expliquer plus que sa yam bon je pense caf a besoin d’expliquer plus que ça donc nous on va utiliser la fonction drag donc pour ajouter un écouteur assure un évènement ou / ame nhem en particulier c’est très simple il suffit de faire google point maps point event point at least honneur l’élément sur lequel on va écouter écouter donc ici c’est mon petit marqueur ici l’événement écoutez donc drague c’est tout et ensuite la fonction utilisée et c’est tout voilà donc cette fonction nous ce que l’on va faire c’est qu’on va récupérer la position du curseur c’est là on voit la m on l’appeler guette position’ voilà donc là je fais les fonctions comme sa vie qui pourrait même la mettre là du coup way dont je vais la mettre comme ça l’avantagé c’est que je vais pouvoir l’utiliser à d’autres endroits donc par exemple va m’être utile à ce moment là mais on verra ça plus tard je vais mettre un peu plus en dessous fonctionne kate position la fonction je vais même la sortir de la boucle jquery parce que ce ne soit pas exécutée avant alors celle là il va plutôt s’appeler cette position ouais moi j’ai plutôt l’appeler 7 parce que c’est ce qui va permettre d’initialiser aussi les champs donc ce serait plus logique dans un premier temps ce que ça va faire ça va récupérer la position du marqueur donc pour récupérer la position du marqueur c’est plutôt simple donc ici je vais récupérer la position du marqueur en faisant marqueur point guette position donc ça ça retourne un objet de type latitude longitude donc ce que je vais faire moi si je leur définit comme ça donc je vais l’appeler quand l’objet l’appeler pause voilà donc ça c’est un objet de type et moi j’ai besoin de récupérer la latitude et la longitude donc ici je retourne sur mon objet lattes lng c’est super chiant c’est mal foutu google maps point la tmg voilà bah je peux récupérer la latitude et la longitude sous forme de chiffres et c’est exactement ce que je veux donc pause point là tu sais des fonctions ouais donc pause point là tu es tu poses point lng et ça je vais les insérer dans mes de champ que j’ai dans mon administration à zizou mais ouais ça c’est chiant dès que vous trouvez sur la mappe isna zoomer faut penser qu

ailleurs donc ici la latitude c’est cet élément là donc ça fera dollars evans plast points valent et entre parenthèses cette valeur pareil lng points valent et entre parenthèses cette valeur là donc voilà là normalement ça devrait être capable d’agir tout seul je vais bouger mon petit point là il ya du avoir pas mal d’erreurs voilà donc jour sur ses épaules et donc il me dit que marqueur n’existe pas alors évidemment marqueur est défini à l’intérieur de cette fonction de la pluie en dehors mais il ne connaît pas donc ce que je vais faire ici je vais lui faire passer en paramètre là le marqueur comme ça j’aurais pas de petits problèmes c’est reparti je replace montpoint ailleurs donc là pas eu de bug particulier et vous voyez en eau que automatiquement mes valeurs se sont changés je leur montre voilà donc maintenant ce que j’aimerais bien faire c’est que si je clique sur toulon la super j’ai cliqué sur toulon et mon curseur est il est toujours en montpellier d’ailleurs voilà il est là bas donc ça peut être pénible si on se déplace à paris ou ailleurs ri de localiser notre point donc ce que je vais faire je vais faire en sorte que le marqueur se déplace et se retrouve dans la position où il devrait être c’est à dire au centre de la carte lorsqu’on clique lorsqu’on appuie c’est un événement donc ici je vais regarder dans les options du marqueur voilà je ne suis pas savoir ce que six marqueurs et vous allez voir maman il ya sept alors tout ça c’est des guettes nous ce qui nous intéresse c’est cette position est il à ce après un couple latitude longitude mais c’est très bien c’est ce qu’on a déjà grâce à ça on fait marqueurs point cette position et on reprend la position donc cette position je l’a créée pour l’occasion histoire de pas y accéder plein de fois et je l’appelais pause et pose alors après à vous de voir si vous voulez en même temps remettre à jour le statut avec un cette position nous pas or à vous de voir moi je vais alger le faire mais du coup ça peut être pénible si l’administration dresse juste pour vérifier que ces rares dirige donc je réactualise ma page et la maman va avoir fini avec le côté back office si je tape paris donc je vois que il a bien passé ma carte par contre il n’a pas bien fait de cette position donc je vais voir si j’ai des erreurs stone des finales voilà j’ai oublié de mettre marqueur encore une erreur mais c’est pas là donc ensuite une question que vous vous posez peut-être donc là je vais taper paris et voilà et j’ai la langue qu’ils genre d’étude et l’attitude toulon pour l’instant je veux comme moyen de vérifier mais bon je le fais confiance à la paix maintenant le problème c’est que si j’enregistre vous vous dites sûrement comment je fais si je reviens sur cette carte mais là tout est mal placée donc quand même un truc que l’on peut faire c’est récupérer les données ici en php vu que je suis sur une bâche php alors ça va être bordélique je réfléchis qu’on peut faire ça ouais je vais aller à la ligne pour chacun et ici en fait m 17 20 17 bis tirait date un event lattes cissé définit alors limite devant le maître comme ça ici défini point d’interrogation alors le léman ce sera ça ce sera la latitude qu’on a déjà rentrés précédemment et sinon ce sera la valeur en chiffres comme ceux ci faisant gaffe à pas oublier de trucs et en mettant un petit écho de vent ont fait la même chose pour la seconde partie le truc est trop petit voilà je vais laisser le chiffre la fin et histoire de pouvoir me retrouver donc ou moins droit et ici je vais mettre là voilà et là je vais encore la ligne et chez c’est donc la norme ans si je me suis pas trompé je retourne à ma carte voilà il la sent trop pressés dans un endroit waouh c’est bizarre non je suis trempé c’est là il a fait deux fois la latitude je vous disais en même temps je l’avais peuple c’est aux états unis je

réactualise et cette fois-ci là je dois avoir la carte au même endroit où je le laissais si vous voyez je la mets en plein air j’envoie mon formulaire je réédite mon formulaire je me retrouvais en plein air donc on a fini pour cette partie là je vais redoute et à l’avènement liste event alors j’étais très vite et celui là est placé un endroit facile à reconnaître toulon voilà où j’aurai l’événement qui s’appelle tests et j’enregistre jouais pas marche trés je vais créer un nouvel événement que je vais placer à montpellier que je vais appeler test de pour faire super original et je vais aussi l’enregistrer donc maintenant on va passer à la partie frontoffice donc la page index voilà moi donc même pas être créés et donc je vais la cré est vite fait c’est juste créer une nouvelle vue file en inde etc ce point cet effet et une nouvelle action dans le contrôleur clubs ont vite fait je récupère tous les événements donc devoir d et 25 on peu importants et ici parce que je vais devoir faire c’est à peu près la même chose donc je vais recopier tout mon script voilà et je vais aller sur ma page index donc la carte ici j’ai la placer directement au bon endroit forcément parce que je n’ai pas besoin d’en récupérer dynamiquement comme ceci nous voilà je la place toujours un peu dézoomer par contre pourquoi la fiche les deux points et c’est ça qui va changer là je vais devoir afficher un marqueur pour chaque donc ensuite en laye et un petit détail c’est qu’est ce que vous voulez qui se passe lorsqu’on clique toujours pas défini j’ai oublié de sauvegarde j’ai oublié le msp donc là il ya deux manières de voir le truc où vous pouvez faire lorsqu’on va cliquer sur un point sa recharge à l’ajax une page où ça fait quelque chose d’autre où s’affiche juste une petite bulle donc moi ce que je pense qu’il est le plus intéressant c’est justement d’afficher un contenu précis par exemple sur la droite où s’ouvrent à vous de voir moi je le sais sur ce concept là si vous voulez utiliser directement les petites bulles qui sont définies par google il doit y avoir un exemple c’est sûrement dans les ovaires live info window single voilà que l’envoyé quand on clique dessus on a tout ça et si vous regardez code source vous saurez faire ça aussi moi ce que je vais faire plus tôt c’est vraiment utiliser un système différent qui permet d’utiliser et de lier ça quelque chose qui se trouvent en dehors de de la carte google je vais y arriver donc ici les marqueurs je vais avoir besoin de les créer dynamiquement dans un tableau donc ce qui est plutôt sympa c’est cet exemple la marque heures animation itération c’est un petit kart si vous faites autre market vous les voyez tombait donc ça correspond parfaitement à ce que l’on veut faire ça déjà beaucoup ça plusieurs points et donc ça a plusieurs points déjà donc ça c’est sympa ce à plusieurs points et c’est à peu près ce que l’on va faire donc nous aussi on va utiliser un tableau pas comme eux parce qu’ils sont un tableau qui définit les latitudes et longitudes après ils utilisent problème c’est que nous on va avoir besoin de greffe et un comportement bien précis au clic donc on va faire ça comme ça mais ça donne une très bonne idée de comment partir et de comment utiliser un tableau pour stocker les différents marqueurs donc nous c’est parti donc la pente après à vous de voir moi je vais faire ça finalement moi j’aime être desdits fonds 1 10 0 10 23 et j’afficherai où je masquerait s’est dit vos besoins donc je récupère tous les événements for each défense as de la rue dollard e égal dollars eu deux événements se passent quelques hp pouces et index mais moi je n’ai pas besoin pour l’occasion and for each klein comme j’ai dit je vais mettre une

d’yves qu’est la classe evans et qui va aussi avoir à l’idée de l’événement donc on va l’appeler events mais ensuite l’idée dollars eu deux idées ça c’est l’idée en bd d1 donc c’est important pour faire la liaison et ensuite je vais avoir comme contenu justin h1 et vous pouvez avoir tout un texte je vous laisse imaginer où je vais à mettre le nom dans leur mail voilà j’ai vérifié que je me suis pas trompé d’un syntaxe voilà vous voyez j’ai testé 1 et est deux et j’ai bien moi d’éviter jemmapes et là c’est sûrement parce qu’il trouve pas tout donc tout ce qui est marqueur jeu le dégage tout ce qui est géo codeurs tout ça en fait on s’en fiche un homme voilà on est reparti avec un truc vierge est propre au passage on va voir mais ici j’ai recréé m’a dit j’ai encore une fois oublié de préciser une largeur et une hauteur donc on va re médecin voilà comme ça ma carte sera affiché en trouvant peut-être on va la mettre en 404 santé x avec un marc jean 0 tôt il sort de la centre et marne jean 2.0 auto tout ça parce que j’ai la flemme de faire un css donc voilà j’ai ma carte était mieux en 100% je vais mettre 1 800 j’ai ma carte voilà bien affichée est centré sur montpellier avec un zoom trop puissant en fait plus le chiffre est gros plus vous zoomez donc ces quatre pour voir zoom ou 6 inférieure voilà là comme ça je verrais bien mais deux points je te soumets un peu plus quand même à 8 en fait sauf finale c’était peut-être pas mal voilà donc ici vais je vais placer mes deux marqueurs donc marqueur je vais placer dans une ambiance mais à la fois en empêche paie donc je vais réutiliser cette douleur et à la volée créer un marqueur et d’y associer l’événement ont cliqué donc je vais créer mon marqueur donc je vais l’appeler marque marqueur donc ce marqueur c’est un new google web apps – marqueur sa position ça va être un new game vient où on va récupérer ici en php la latitude et la longitude dollars eu de lattes là faut pas s’y mélanger entre les deux langages dollars eu de longues voilà comme ça génial latitude et la longitude sauf que ça finit par une pierre culte si je me trompe pas sur la mappe nappe corps une fois drg à gâbles je le veux pas drague à bhl donc falls et on va mettre la petite animation sympa google pourrait maps point animation pointe d’europe voilà donc ça c’est ce qu’on a eu c’est un des nouveaux trucs de l’apei donc autant l’utiliser c’est marrant plus voilà et ensuite on va y associer un comportement particulier donc après j’ai envie de tester un truc marqueur point idée event alors pourquoi si on passe aussi directement des objets qui existe pas et voir si ça fonctionne et égale dollars hp qu’au delà de 2 des as c’est juste un test pour le coup donc ça marche pas belle je suis désolé de voir montrer ça qui sert à rien voilà donc on dirait que ça fonctionne donc on va laisser sein et ce marqueur on va le placer dans un tableau particulier qu’en faisant un

tableau donc var markers ça va être un tableau comme ça qu’on va avoir besoin d’un index donc ça c’est ce qu’ils ont fait aussi pour leur exemple 0 donc là pour l’instant en fait j’ai pas besoin de js j’ai pas besoin de jquery donc je vais rester comme ça donc là en fait je vais partir d’une autre d’une autre façon parce que je vais avoir besoin de digérer pour faire tomber les objets un parent en javascript et non pas un peu hp donc pour chaque event je vais créer plutôt un objet vous allez voir ça n for each en faisant donc les marqueurs voile appelé les positions positionne donc on fera positionne ce point push et on va y mettre un objet de type e on sait pas trop ce que c’est on va mettre l’idée de les vendre l’idée de les venza sera eco dollars deux idées donc ça ça va me permettre d’avoir l’idée de l’événement dans un objet ainsi que la latitude alors là c’est pas un point virgule mais c’est bien un véhicule en j s la latitude donc écho dollars eu de late late voilà et la longitude lng deux points de la eudeline donc là j’ai mes éléments donc ce que je vais faire je vais utiliser leur exemple celui de l’animation en fait en réutilisant times qui va se lancer plusieurs fois qui va nous permettre de faire l’animation de tous les éléments qui se posent un hier à saint céré ailleurs donc on va mettre iterator comme pour le coup et on va faire un fort var de larry égal 0 à 10 dollar y y je me mélange convié ses partisans de l’art y est inférieure à la taille du tableau donc position ce point de lenz donc ça c’est vraiment du geste puis envoyé en fait que j’écris le tâte mais je vais pas avoir besoin donc je vais carrément le dégager voilà est il plus plus alors qu’est-ce que j’ai lancé je vais lancer un événement qui va se dérouler toutes les x secondes alors là je m ils ont mis 200 jeux mettre 300 c’est plus sympa donc cette time out donc je choisi de lancer la fonction hadmar coeur ou drop marque heures plus tôt c’est plutôt hadmar coeur parce que ça va ajouter le marqueur à partir de ce qu’on a ici à deux marqueurs et au bout de 10 x 300 donc le premier va se lancer tout de suite le second 300 millisecondes ensuite 600 900 et ainsi de suite donc là le i plus histoire que le premier il arrive avec un léger petits dés et la fonction elle s’appelle hadmar coeur donc je vais la crête suite fonctionne pas de marqueur et ici je vais juste m alerte oui donc là je veux que généreux un peu bizarre à mon avis c’est parce que vu que le j essaie d exécuter directement mais ils voient pas cette balise et du coup il plante ou y ce que je vais faire j’ai remis chez quarry et je vais remettre la fonction parce qu’au moins cette fonction elle est simple elle me permet d’attendre que le document se charger évidemment il ya plus simple un on peut directement ici la fonction j’espère faire avec un body en mode bon là j’ai pas envie de me prendre la tête pour le coup je vais juste réactive et jquery et remettre un bon gros coup de tabulation voilà donc là ça remarche voyez j’ai un premier vol qui s’affiche et un second donc j’ai bien mon itération qui se fait deux fois donc là la fonction iterator donc je vais enlever le dollar parce que du coup elle sert à rien mais luxueux je vais faire ici le littérateur je vais l’incrémentation ferme mesure iterator plus plus est ici je vais déposer au marqueur donc déjà j’ai besoin de récupérer l’événement donc si jallet va récupérer cet objet l’un et ça votre position vous allez voir que c’est quasiment gagné donc ici position de iterator iterator point i des ventes de là je vais pouvoir afficher à dire je vais pouvoir récupérer aussi belle la latitude et la longitude 1 et 2 donc c’est bien les idées peu hp enfin j’espère que c’est ça donc ici belge est bien l’idée php je peux aussi récupérer la latitude et la logique donc grâce à cet objet là je vais pouvoir faire passer plein de choses donc je pourrais faire passer le titre pour faire une alerte du titre par exemple ça l’intérêt mais je pourrais le faire donc on est parti là on va pouvoir

faire tout ce qu’on a envie de faire donc déjà rajouté les marqueurs donc var marqueur donc là je vais la joue t mais ce que je peux avoir besoin non je serai directement mme ajoutée et donc vous voyez la variable qu’elle déclare à l’âge de la perdre mais c’est pas grave hein donc voir marqueur égale google points maps points marqueurs alors ce marqueur il est une position bien défini qui a new google – map ce point là tu lng qui prend 2 par m le premier c’est la latitude plate et le second c’est la longitude j’ai besoin voilà donc là je vais pouvoir placer mon marque ce marqueur je ne veux pas qu’ils soient alors je veux qu’ils soient associés forcément à la map donc maintenant qu’ils soient pas cliquable qui soit cliquable mon choix est laissé qui ne soit pas de ragga bhl ragab falls et je veux surtout clie la petite animation sympa donc c’est pour ça que j’ai fait tout ce merdier sinon j’aurais plus directement ajouté les éléments un point d’europe voilà donc la meilleure coeur vont se placer et ensuite j’ai incrémente iterator genre tu est donc là vous voyez que j’ai cette erreur l’un et là effectivement j’ai oublié de mettre un petit mieux ici est donc là j’ai oublié en plus de mettre un petit new ici donc la norme tout leur marché j’actualise et voyez que j’ai mes deux curseurs qui sont tombés bon c’est plutôt sympa d’avoir cette animation après à vous de voir ce que vous voulez en faire donc moi je m une seconde plus tôt après ça peut être plutôt sympa si vous en avez 2002 point ça peut faire un truc qui défilent voilà pour deux points c’est pas forcément super sexy en fait mais bon voilà on voit déjà sur leur exemple si je le retrouve voilà que ça donnait plutôt sympa up donc en partant de ça maintenant il faut que quand on clique sur les événements ça fasse des choses particulières donc là on va utiliser la même chose qu’on avait utilisé pour l’administration c’est ici voilà donc on va faire en sorte qu’on puisse déplacer en plus cliquez dessus donc n’a pas besoin de faire un dessin on remplace par clic et la fonction aller ici donc ici on va faire en sorte de cacher toutes les digues qui ont la classe event donc j’ai besoin de jcs de ji quan pour le crew donc event point hyde et ensuite on affiche la seule qui allaient l’idée de l’événement l’idée de l’événement evans poing event point alors là on a besoin de trouver celle qui a la classe event et ensuite l’idée l’idée l’idée moi ce que je vais faire je vais à placer directement ce marqueur puis surcharge surchargé l’objet en mettant une idée evans qui est égal à ça voilà vous là ça va être id event id et vas tu es comme ça ici j’aurais plus qu’à faire point plus marqueur point idée event je suis quoi en fait je peux mettre directement m id vannes comme ça égal comme ça et ici voilà alors j’ai pour la faut voir la portée encore une fois des variables pour ça fonctionne bien points chauds une slide dents bon il semblerait que ça doit fonctionner hop ce que je vais faire je vais aller dans mon admin si et allez créer un événement pour le supprimer histoire de faire un petit saut en plus d’idées histoire de s’assurer que c’est pas un pro il ya pas un truc avec js voilà donc je place ça entre les deux sets mythe je supprime le second you want donc là je vais placer à toulouse toulon et j’ai appelé tout le

monde voilà non ils sont bien alors le premier il était où et surtout le vent donc celui là on va le mettre sur montpellier poudre voilà et je sais dit donc la cij entente sur mon france j’ai mis trois points qui se place est ici je vois qu’il affiche la dives tu me vois la dives toulon où la dives test donc en bref bon la portée de la variable est bonne donc après bon c’est vraiment un exemple à vous de voir un peu comment voulez pousser ça donc des gens puissent qu’on peut faire c’est enlever les curseurs enlever tout ça pour laisser que la map apparaître ou laisser l’utilisateur bouger donc à vous de voir il n’y a pas de choses que l’on peut faire avec cette api là donc voilà globalement c’est vraiment un exemple basique ça va vous permettre d’approcher la pays et de l’utiliser pour des choses plus concrètes bon là moi j’ai déjà des idées d’utilisation mais après à vous de voir mais bon clairement on peut pousser encore ce concept un peu plus loin donc voilà j’espère que ce tutoriel vous aura permis de mettre un peu les pieds dans le plat et de voir un peu ce que permettait l’apei de google donc c’est une api qui est très très complète je vous invite à cliquer à tester la galerie démonstration il ya vraiment vraiment des trucs plutôt sympa à tester puis davantage c’est que ça peut être utile pour des projets notamment la location des villas des systèmes d’événements de l’événementiel c’est plutôt sympa donc voilà surtout si vous avez des questions concernant ceux d’un pays où une idée d’application qu on pourrait concevoir qu’ils utiliseraient d’autres fonctionnalités que j’ai pas vu aujourd’hui mais n’hésitez pas à poster un commentaire ça pourra peut-être ça pourra peut-être faire l’objet d’un nouveau sommet