Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

 > Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS - Intégration API v3 Google Map (Touraine verte)
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Intégration API v3 Google Map (Touraine verte)
 Répondre Répondre Page  12>
Auteur
Message
  Sujet Recherche Sujet Recherche  Options des sujets Options des sujets
Rizane allez vers le bas
Newbie
Newbie


Depuis le: 02 Avr 2014
Status: Inactif
Points: 29 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Rizane Citer  RépondreRéponse Lien Direct à ce Post Sujet: Intégration API v3 Google Map (Touraine verte)
    Envoyé : 09 Sep 2014 à 11:35
Bonjour,

Je cherche à intégrer une carte Google Map via l'API v3.

Le script de Touraine verte fonctionne très bien hors Openelement.

Mais quand je veux l'intégrer à une page de mon projet Openelement , rien ne s'affiche...
(tests en local uniquement)

Ci-dessous le code complet, avec les indications de "coupure" car j'ai intégré les différents éléments dans divers scripts source et visuel.

Le css avec son "html {height:100%;}" poserait-il problème ?

(si je dois présenter le code autrement pour une meilleure lisibilité, n'hésitez pas à me l'indiquer)

<!DOCTYPE html> => suppression
<html lang="fr"> => suppression
	<head> => suppression
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> => intégration dans le meta de la page
		<meta charset="UTF-8" /> => suppression
		<title>Titre de votre page</title> => suppression
		<style type="text/css"> => code source css header sans les balises <script>
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> => code source html header avec les balises script
		<script type="text/javascript"> => code source javascript header sans les balises script
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
			google.maps.event.addDomListener(window, 'load', initialisation)
		</script>
	</head> => suppression
	<body> => suppression
		<div id="EmplacementDeMaCarte"></div> => code visuel
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body> => suppression
</html> => suppression
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4896 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 09 Sep 2014 à 12:08
As-tu recherché sur le forum, recherche : map, sujet souvent abordé.
Haut de la page
Rizane allez vers le bas
Newbie
Newbie


Depuis le: 02 Avr 2014
Status: Inactif
Points: 29 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Rizane Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 09 Sep 2014 à 14:03
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 !
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 31 Mai 2012
Status: Inactif
Points: 13998 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 09 Sep 2014 à 14:25
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
Haut de la page
Rizane allez vers le bas
Newbie
Newbie


Depuis le: 02 Avr 2014
Status: Inactif
Points: 29 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Rizane Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 09 Sep 2014 à 15:14
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)

Cry
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 31 Mai 2012
Status: Inactif
Points: 13998 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 09 Sep 2014 à 15:17
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").
Haut de la page
Rizane allez vers le bas
Newbie
Newbie


Depuis le: 02 Avr 2014
Status: Inactif
Points: 29 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Rizane Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Sep 2014 à 18:42
Merci pour l'astuce de la page externe, j'ai une belle carte qui s'affiche maintenant Wink

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..?
Haut de la page
Rizane allez vers le bas
Newbie
Newbie


Depuis le: 02 Avr 2014
Status: Inactif
Points: 29 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Rizane Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Sep 2014 à 21:37
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...
 
Haut de la page
Rizane allez vers le bas
Newbie
Newbie


Depuis le: 02 Avr 2014
Status: Inactif
Points: 29 		Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Rizane Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 17 Sep 2014 à 18:55
Bonjour à tous.

Ce fut laborieux, mais j'ai quand même terminé la journée sur une danse de la joie Party
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; 
var mapOptions = {
        center: new google.maps.LatLng(48.856614, 2.352222),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.TERRAIN
        };
 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        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 !Wink

Bonne fin de journée !







Edité par Rizane - 17 Sep 2014 à 18:57
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5392 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 18 Sep 2014 à 16:33
Yes ! moi qui doit justement me battre avec des googles maps prochainement !!
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,031 secondes.
Acheter votre vélo en ligne