Intégration API v3 Google Map (Touraine verte) |
Répondre | Page 12> |
Auteur |
Sujet Recherche Options des sujets
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
Envoyé : 18 Sep 2014 à 16:41 |
je vais tacher de reprendre tes explications pour mettre a jour la faq. merci du retour
|
|
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(0)
|
Yes ! moi qui doit justement me battre avec des googles maps prochainement !!
|
|
Rizane
Newbie Depuis le: 02 Avr 2014 Status: Inactif Points: 29 |
Options des messages
Thanks(1)
|
Bonjour à tous.
Ce fut laborieux, mais j'ai quand même terminé la journée sur une danse de la joie Enfin un résultat qui tient la route ! Je donne ci-dessous le code des deux pages "appelées". Je sais, c'est long, et je ne sais pas comment afficher le code correctement, mais si ça peut servir à quelqu'un.. N'hésitez pas bien sûr si vous y voyez des améliorations possibles. NB : le code fonctionne aussi pour plusieurs paramètres dans l'url 1- page.php (OE) On y intègre une page externe qui pointe vers un fichier php nommé essai.php 2-essai.php ci-dessous le code qui retourne la variable de la fenêtre parente (page.php?urldepartement=01) <head> <script type="text/javascript"> function getQuerystring(key, default_) { if (default_==null) default_=""; key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regex = new RegExp("[\\?&]"+key+"=([^&#]*)"); var qs = regex.exec(window.parent.location.href); if(qs == null) return default_; else return qs[1]; } var departement = getQuerystring('urldepartement'); </script> //Puis le code "ajax" (toujours dans la même page) pour envoyer cette variable à un 3ème fichier php (essaifichier.php) qui l'utilisera pour créer une réponse au format JSON (voir plus bas). Cette réponse sera ensuite retournée dans le head de essai.php via getResponseHeader, et javascript l'utilisera pour créer la map avec l'api v3 de Google. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function createRequestObject() { var http; if (window.XMLHttpRequest) { // Mozilla, Konqueror/Safari, IE7 ... http = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Internet Explorer 6 http = new ActiveXObject("Microsoft.XMLHTTP"); } return http; } // createRequestObject() function validateJSON(jsonText) { return !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test( jsonText.replace(/"(\\.|[^"\\])*"/g, ''))) && eval('(' + jsonText + ')'); } // validateJSON(jsonText) function gestionClic() { var http = createRequestObject(); http.open('GET', 'essaifichier.php?param='+departement, true); http.onreadystatechange = (function () { if (http.readyState == 4) { if (http.status == 200) { var liste_des_points = validateJSON(http.getResponseHeader('X-JSON')); if (liste_des_points !== false) { function initialize() { var markers = liste_des_points;for (i = 0; i < markers.length; i++) { var data = markers; var myLatlng = new google.maps.LatLng(data.lat, data.lon); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.id, }); (function(marker, data) { // attache un évément clic au marqueur courant google.maps.event.addListener(marker, "click", function(e) { infoWindow.setContent('data.nom'); infoWindow.open(map, marker); }); }) (marker, data); } } initialize(); } else { alert("JSON invalide"); } } else { alert('Pas glop pas glop'); } } }); http.send(null); } </script> </head> <body onload="gestionClic()"> <div id="map_canvas"></div> </body> 3 - essaifichier.php Il sert à récupérer les coordonnées et informations dans ma bdd pour afficher les marqueurs, selon une recherche qui intègre la variable envoyée via ajax. <?php header('Content-Type: text/html; charset: UTF-8'); $departement = $_GET['param']; //CONNEXION mysql_connect() or die("Impossible de se connecter : " . mysql_error()); mysql_select_db("base"); $reponse=mysql_query("SELECT * FROM table WHERE (code_postal='$departement') AND (latitude <> 0)"); $str=''; while ($donnees=mysql_fetch_array($reponse)){ if($str!='') $str.=','; //ajoute la virgule de séparation des points $str.='{"lat" : '.$donnees['latitude'].', "lon" : '.$donnees['longitude'].',"nom" : "'.$donnees['nom'].'", "id" : "'.$donnees['id'].'"}'; } $str = '['.$str.']'; //on ajoute les crochets pour respecter le format json header('X-JSON: ' . $str); ?> VOILA ! J'aime bien trouver des solutions ! Bonne fin de journée ! Edité par Rizane - 17 Sep 2014 à 18:57 |
|
Rizane
Newbie Depuis le: 02 Avr 2014 Status: Inactif Points: 29 |
Options des messages
Thanks(0)
|
J'ai récupéré la variable de la page principale en javascript (en utilisant "window.parent.location.href" notamment)
Je tente maintenant de déchiffrer l'utilisation de XMLHttpRequest pour envoyer la variable au serveur via GET puis la récupérer via php. Plein de liens sur Google. Je me base pour le moment sur Openclassrooms ... Affaire à suivre... |
|
Rizane
Newbie Depuis le: 02 Avr 2014 Status: Inactif Points: 29 |
Options des messages
Thanks(0)
|
Merci pour l'astuce de la page externe, j'ai une belle carte qui s'affiche maintenant
Le seul hic avec cette solution, c'est que maintenant je ne sais pas du tout comment récupérer les variables que j'avais passées dans l'url de la page principale .. Il y a un moyen de les transmettre à l'iframe ? En cherchant sur Google je n'ai pour l'instant trouvé qu'une méthode qui consiste à faire passer les arguments dans le src de l'iframe. Mais avec OE, je ne sais pas comment m'y prendre..? |
|
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
Pour faire plus simple, creez votre page avec la carte hors OE, enregistrez dans le dossier du projet (Et ensuite publiez a la main car openElement ne la publiera pas) et utilisez l'element Page externe (iframe) pour l'acceder. Dans la configuration de lien, il faut choisir "LOCAL" au lieu de "HTML" en bas a gauche du champ d'adresse, et dans le champ taper le nom de la page (ex. "map.html").
|
|
Rizane
Newbie Depuis le: 02 Avr 2014 Status: Inactif Points: 29 |
Options des messages
Thanks(0)
|
Toujours rien...
Il y a peut être "contradiction" entre le css existant d'OE et ce que requiert le script ? Enfin, ce n'est qu'une idée... car si je fais le test hors OE, et que je modifie le css, ça ne m'affiche plus rien non plus... (sur OE, j'ai fait les essais sur un projet vierge, sans modèle, en local) |
|
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
Bonjour,
Il faut mettre ce qui est entre <head> et </head> dans Bloc de Code Source type HTML (!!) position Header Tout ce qui est entre <body> et </body> dans Bloc de Code Visuel |
|
Rizane
Newbie Depuis le: 02 Avr 2014 Status: Inactif Points: 29 |
Options des messages
Thanks(0)
|
J'ai cherché mais malheureusement sans résultat...
C'est important pour moi de passer par l'API car je veux pouvoir personnaliser les infobulles (intégration d'images, de liens,...). Ce que je ne peux (sais) pas faire avec une simple intégration d'iframe. Je ne sais pas si quelqu'un l'a déjà fait sur un de ses sites ? Merci d'avance ! |
|
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
As-tu recherché sur le forum, recherche : map, sujet souvent abordé.
|
|
Répondre | Page 12> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |