Google Maps API v3

Publié le : 21 novembre 2010 – Dernière modification le 21 décembre 2021 – par xdjuj – 51 commentaires

1
2
3
4
5
17 votes

Attention, cette contribution est EN CHANTIER : elle n’est peut-être pas fonctionnelle.

Bien qu’en chantier, cette contribution est parfaitement fonctionnelle mais pour l’instant pauvre en fonctionnalités
L’API v3 de Google Maps et son exploitation en JSON. Une carte dans les pages articles du privé pour placer un marqueur.
Ce plugin n’est pas la nouvelle version du plugin GoogleMapAPI, c’est un plugin autonome permettant d’utiliser simplement la nouvelle API de Google Maps. Il n’est pour l’instant pas autant aboutit, contributeurs bien venus :)
Pour ceux qui souhaitent du fonctionnel tout de suite :

Bien qu’en chantier, cette contribution est parfaitement fonctionnelle mais pour l’instant pauvre en fonctionnalités

L’API v3 de Google Maps et son exploitation en JSON. Une carte dans les pages articles du privé pour placer un marqueur.

Ce plugin n’est pas la nouvelle version du plugin GoogleMapAPI, c’est un plugin autonome permettant d’utiliser simplement la nouvelle API de Google Maps. Il n’est pour l’instant pas autant aboutit, contributeurs bien venus :)

Pour ceux qui souhaitent du fonctionnel tout de suite :

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

16 discussions

  • tits

    Bonjour,
    Je rencontre un pb déjà évoqué, lorsque j’utilise le fichier sommaire qui se trouve dans le dossier exemple fourni avec le plugin, tout fonctionne bien, mais lorsque je le met dans mon squellette article ou rubrique, rien ne s’affiche.
    Faut-il déplacer le fichier json-tousLesArticles.html dans le dossier squelette du site ?

    Mertci pour vos réponses

    Répondre à ce message

  • 3
    benolaos

    « json-encode non défini » dans « plugins/googlemaps_api_v3/json-tousLesArticles.html »...

    Voilà la réponse à la requête : spip.php ?page=json-tousLesArticles sur mon site online, alors que tout fonctionne en local.

    Il me semble avoir couvert tous les champs de mon possible. Quelqu’un a-t-il déjà rencontré le problème ?

    • xdjuj

      Salut benolaos.

      Le problème, c’est Online. Ce sont juste des gros nases et je t’invite aussi à lire leurs CGV abusives (court vite chez Gandi ou OVH ça t’évitera bien des soucis, ou chez un hébergeur gratuit, ça sera toujours mieux).

      Peut être n’es-tu pas en PHP5. Demande leur d’activer PHP5, si jamais ils l’ont sur leurs bouses et qu’ils trouvent un indépendant qui soit capable de leur installer parce que eux en interne... :)

      (tu peux aussi installer GIS Escoitar qui fonctionne directement bien)

      Bon courage :p

    • benolaos

      Bonjour xdjuj,

      Quand je disais que mon site ne fonctionnait pas « online », je parlais par opposition au site développé en local, et non « online » le nom de la société. En fait, je suis hébergé sur OVH... Et il semble que je sois déjà sous PHP5 (la base est placée sous MySQL5...)

      Ca ne viendrait donc pas de cela, mais de quelque chose d’autre ;-) Mais quoi... En tout cas, merci xdjuj pour ta réponse, même si il y a besoin de creuser un peu plus la chose...

    • xdjuj

      lol ok ;-) Bah en tout cas, concernant Online c’est dit :p

      Sinon essaye d’activer PHP5 (des fois que ça soit pas fait => http://guides.ovh.com/Php5ChezOvh )

    Répondre à ce message

  • Raphael

    Bonjour,

    Je signale quelques bugs que j’ai corrigé.

    Il y a un problème d’encodage des urls lié à un bug avec la fonction json_encode de php (php 5.3).

    Ajouter dans mes_fonctions.php

    function my_json_encode($value){
	return str_replace('\\/', '/', json_encode($value));
}

    Dans json-tousLesArticles.html

    [(#GET{lesMarqueurs}|my_json_encode)]

    Pour afficher les marqueurs personnalisés, dans le fichier gmap_v3.js remplacer

    icon: '[(#GET{icon})]'

    par

    icon: leMarqueur.titre

    Bon dev,

    Répondre à ce message

  • 1
    Stéphane Santon

    Bonjour,

    Je désire n’afficher que le point de l’article en cours, ou les points de la rubrique en cours...
    Comment passer une variable d’environnement id_article ou id_rubrique à json-mesArticles ?

    J’espérais faire un appel à

    <INCLURE{fond=theme/js/gmaps_v3.js,nomCarte=cartePage,json=json-mesArticles#ID_ARTICLE} />

    et traduire le json-mesArticles-art#ID_ARTICLE en spip.php?page=json-mesArticles&id_article=2 par le urlrewrite du .htaccess

    Mais l’url de l’appel javascript est transformé en
    http://www.site.com/spip.php?page=json-mesArticles-art2
    donc impossible à transformer avec le .htaccess

    Comment donc passer des paramètres ?
    Si pas possible, pourquoi ne pas appeler l’url brute pour que l’on traite selon nos désirs par la suite ?

    • Stéphane Santon

      J’ai bricolé en surchargeant theme/js/geomaps_v3.js.html.
      Rajouté une ligne pour intégrer le paramètre à l’appel du json :

      [(#SET{json,#URL_PAGE{#ENV{json}}|sinon{#URL_PAGE{json-tousLesArticles}}})]
[(#SET{json,[(#GET{json}|parametre_url{id_article,#ENV{id_article}}|replace{'&amp;','&'})]})]

      et ajouté le paramètre à l’environnement d’appel :

      <INCLURE{fond=theme/js/gmaps_v3.js,nomCarte=cartePage,mapType=ROADMAP,json=json-article_Id,id_article=#ID_ARTICLE,zoom=16} />

    Répondre à ce message

  • 2
    Stéphane Santon

    Google marquait « Pas trouvé ! » quand je recherchais une adresse en France.
    Il faut lui spécifier la région dans formulaires/geocodage.html :

    <script src="http://maps.google.com/maps/api/js?sensor=false&region=FR" ...

    • Stéphane Santon

      Oupsss.. j’ai écrit des bêtises. Il ne trouve encore plus.

    • Stéphane Santon

      Maintenant il trouve. Ce devait être un problème du côté du serveur de Google Maps.

    Répondre à ce message

  • Stéphane Santon

    Dans json-tousLesArticles.html, pour ne pas créer de tag quand latitude et longitude ne sont pas encore renseignés, on peut faire {!ISNULL latitude} :

    <BOUCLE_LesArticles(ARTICLES){par num titre}{!ISNULL latitude}>

    Répondre à ce message

  • 1
    Stéphane Santon

    Bonjour,
    Ah mais il y a une version 3 !
    Est-ce la génération des marqueurs est absolument liée à la table Articles avec lat/lonx, ou bien suffit-il de personnaliser le fichier json pour que ça fonctionne avec rubriques ou d’autres objets éditoriaux ?

    • xdjuj

      Attention comme indiqué, ça n’est pas « une version 3 ». C’est une version qui utilise l’API 3 de Google Maps et qui est bien moins aboutie que GIS. Pour l’instant ça n’est lié qu’à la table ARTICLES.

      Pour faire propre il faudrait faire une table annexe pour lier aux objets de manière générale, ça n’est pour l’instant pas le cas :)

    Répondre à ce message

  • 1
    Stéphane Santon

    Pourquoi ne pas avoir déclaré les champs extras latitude et longitude en float (et non text) comme dans gis ?

    • xdjuj

      Parce que par défaut Champs Extra2 fait du TEXTE :p Mais c’est modifiable oui :)

    Répondre à ce message

  • 8
    ad

    Bonjour à tous,
    je ne sais pas si le code suivant est tres « academique » mais il a l’air de fonctionner chez moi correctement si cela peux vous servir ou vous inspirer.
    Le centrage de la carte crée se fait aussi en fonction de la latitude et longitude issus de l’article.

    un nouveau fichier que j’ai nommé « json-mes-articles.html » (a la racine du plugin Gmap) :

    [(#CACHE{0})][(#HTTP_HEADER{Content-type: application/json[; charset=(#CHARSET)]})]
[(#SET{lesMarqueurs, #ARRAY})]
<BOUCLE_LesArticles(ARTICLES){par id_rubrique}>
	[(#SET{lienUrl,#URL_ARTICLE})]
	[(#SET{leTitre,[(#ID_RUBRIQUE|textebrut)]})]
	[(#SET_PUSH{ 'lesMarqueurs',#ARRAY{titre,#GET{leTitre},latitude,#LATITUDE,longitude,#LONGITUDE,lienUrl,#GET{lienUrl}}})]

</BOUCLE_LesArticles>
[(#SET{tousLesMarqueurs,#ARRAY{tousLesMarqueurs,#GET{lesMarqueurs}}})]
[(#GET{lesMarqueurs}|json_encode)]

    Appellé par « article.html » de mon squelette dont voici le code d’inclusion :

    [(#REM) Inclusion carte Alex)]
[(#SET{zoomperso,#ZOOM|sinon{9}})]
		<INCLURE{fond=theme/js/gmaps_v3.js,latitude=(#LATITUDE),longitude=(#LONGITUDE),zoom=(#GET{zoomperso}),nomCarte=carteComplete,mapType=HYBRID,json=json-mes-articles} ></INCLURE>
		<div id="carteComplete" style="width:500px; height:300px"></div>
[(#REM) Fin Inclusion carte Alex)]

    Pour visualiser les variables latitude, longitude et zoom inclusion de cette portion de code dans « article.html » apres le sous-titre de l’aricle :

    [(#LATITUDE|oui)

                [<p>Latitude: (#LATITUDE)</p>]
				[<p>Longitude: (#LONGITUDE)</p>]
				[<p>Zoom: (#ZOOM)</p>]
]

    la variable « zoomperso » provient en realité de l’article qui lors de sa creation a beneficié d’un « champ_extra » supplementaire
    qui permet de donner un niveau de zoom directement dans la creation d’article comme Lat et Long,
    implementé dans « /base/gmap_v3.php » de cette maniere :
    (j’ai créé moi meme le champ « zoom » de type « text » a la main dans la table spip_article
    pour ne pas perdre les Latitudes et longitudes existantes, mais une desactivation et re activation du plugin devrait s’en charger normalement
    au risque de perdre le champs « latitude et longitude » installés au depart par le plugin... a voir pas essayé)

    	$champs[] = new ChampExtra(array(
		'table' => 'article',					// Table (au sens Champs Extra 2)
		'champ' => 'zoom',						// Nom du champs dans la base de donnée
		'label' => 'gmaps_v3:zoom',		// Nom dans le formulaire dans l'espace privé
		// 'precisions'=>'',						// 
		// 'obligatoire'=>'on',					// Champs obligatoire ?
		// 'verifier'=>'',							//
		// 'verifier_options'=>'',					//
		'rechercher'=>'',						// Ne pas inclure dans la fonction de recherche
		'type' => 'ligne',					// Type dans Champs Extra
		'sql' => "text NULL DEFAULT ''", 	// Declaration sql
		'traitements'=>''						// Table des traitements de SPIP
	));

    et enfin une modif du fichier « theme/js/gmap_v3.js.html » dont voici l’integralité :

    [(#REM)  
/*
 * Initialiser l'API v3 de Google Maps
 *
 */
]
[(#SET{latitude,#ENV{latitude}|sinon{#CONFIG{config_gmaps_v3/latitude}}|sinon{42.112614}})]
[(#SET{longitude,#ENV{longitude}|sinon{#CONFIG{config_gmaps_v3/longitude}}|sinon{8.701987}})]
[(#SET{zoom,#ENV{zoom}|sinon{#CONFIG{config_gmaps_v3/zoom}}|sinon{15}})]
[(#SET{mapType,#ENV{mapType}|sinon{#CONFIG{config_gmaps_v3/mapType}}|sinon{SATELLITE}})]
[(#SET{nomCarte,#ENV{nomCarte}|sinon{#CONFIG{config_gmaps_v3/nomCarte}}|sinon{carte_gmaps_v3}})]

[(#SET{json,#URL_PAGE{#ENV{json}}|sinon{#URL_PAGE{json-tousLesArticles}}})]
[(#SET{icon,#ENV{icon}|sinon{#CHEMIN{theme/img/gmaps_v3-24.pn}}})]
[(#SET{lienUrl,#ENV{lienUrl}|sinon{'rien'}})]

<script type="text/javascript" charset="utf-8">	
function affichageNormal(){
	var latLng = new google.maps.LatLng(#GET{latitude},#GET{longitude});
	var options = {
		center: latLng,
		zoom: #GET{zoom},
		mapTypeId: google.maps.MapTypeId.#GET{mapType}
	};
	var laCarte = new google.maps.Map(document.getElementById("#GET{nomCarte}"), options);

	var url="#GET{json}";
	jQuery.getJSON(url,function(lesMarqueurs){
		jQuery.each(lesMarqueurs,function(i,leMarqueur){

			var marqueur = new google.maps.Marker({
				position: new google.maps.LatLng(leMarqueur.latitude,leMarqueur.longitude),
				title: leMarqueur.titre,
				map: laCarte,
				icon: '[(#GET{icon})]'
				//draggable: true
			});
	  	var contenuInfoBulle = '<div id="conteneurInfoBulle">' +
       '<h1>Titre de l\'info-bulle</h1>' +
       '<div id="texteInfoBulle">' +
       '<p>Maternité.</p>' +
       '<p><a href="'+ leMarqueur.lienUrl + '" title="'+ leMarqueur.titre+'" target="_parent">Lien article souhaite</a></p>' +
       '</div>' +
       '</div>';
	 	var infoWindow = new google.maps.InfoWindow({content:contenuInfoBulle});
			google.maps.event.addListener(marqueur, 'click', function() {infoWindow.open(laCarte, marqueur); });

		});
	});
}

jQuery(document).ready(function() {	
	affichageNormal();
});
</script>

    Tout ceci est bien evidemment valable pour moi (testé avec ie8, firefox3.6) et peux ne pas fonctionner sur votre squelette
    en esperant vous avoir aidé
    Alex

    • benolaos

      Brillant !!!
      On aimerait avoir ça natif dans le plugin ;-)

      J’utilise cette fonction pour faire un plan d’une ville et renseigner cette carte par des emplacements différenciés. Malheureusement, je n’arrive désespérément pas à :
      -  afficher les logos des rubriques parentes
      -  n’afficher que l’emplacement du seul article (les différentes boucles ne semblent pas fonctionner...) et non de tous les articles...

      Une idée ?
      En tout cas merci pour ce script !!!

    • benolaos

      Autre énigme : comme TroOn, je voulais faire un test avant d’afficher, sur Latitude pourquoi pas.

      [(#LATITUDE|oui)
[(#SET{zoomperso,#ZOOM|sinon{14}})]
<INCLURE{fond=theme/js/gmaps_v3.js,latitude=(#LATITUDE),longitude=(#LONGITUDE),zoom=(#GET{zoomperso}),nomCarte=luangprabang,mapType=HYBRID,json=json-unArticle}></INCLURE>
<div id="luangprabang" style="width:500px; height:420px"></div>
]

      J’obtiens l’erreur « Filtre zoom= non défini ».
      J’ai essayé la méthode des inclusions successives, mais la carte ne s’affiche pas...
      Des idées ?

    • ad

      Bonsoir, pour te repondre Benolaos, les diverses boucles ne marchent pas et c’est dû au « json » transmis au script JS (dans json-tousLesArticles.html) qui pourtant semble bien formé,mais qui foire quand on essaye de changer la definition de la boucle par ex : {#ID_RUBRIQUE= #ENV{variable}} alors que ça fonctionne avec {#ID_RUBRIQUE=5}.
      J’ai contourné le probleme et posterais du code prochainement, j’utilise le script avec une table aditionnelle et non pas avec des articles donc il falait absolument que ça fonctionne, Pour le [(#LATITUDE|oui)  ] cela ne fonctionne pas non et c’est du a SPIP qui visiblement (je me trompe peut-etre... si des specialistes de SPIP peuvent nous eclairer) a du mal à avaler un div inclus.
      Donc je suis parti sur autre chose qui sera plus orienté modele à inclure dans un article sous la forme <cartegmap|> par exemple qui sera plus facile a mettre en oeuvre sans modifier le code de l’article. pour peut-etre le mettre dans le plugin par la suite.

    • benolaos

      Sabaidee Ad,

      Hum, ça promet ! Et bien attendons donc patiemment que les développements se fassent pour le plus grand bien de la communauté SPIP. A bientôt, bonne chance et bonne année !!!

    • xdjuj

      Bonjour ad.

      Je t’invite à revoir déjà tes bases de SPIP sur les boucles :
      http://www.spip.net/fr_article898.html

      #ID_RUBRIQUE n’a jamais été (à ma connaissance) un critère de boucle, pas étonnant que ta boucle ne fonctionne pas : {id_rubrique = #ENV{variable}} semblerait plus indiqué dans ton cas.

      Quant au « div inclus » je ne sais pas ce que c’est. [(#LATITUDE|oui) ici du HTML ] fonctionnera parfaitement bien. J’ai surtout l’impression que tu as une boucle plutôt que du HTML certainement [(#LATITUDE|oui) <BOUCLEtruc> ], et ça, ça n’est pas permis. Si c’est ce que tu souhaites faire, tu dois alors utiliser des inclusions [(#LATITUDE|oui) <INCLURE truc> ] avec inclure truc qui contient ta boucle -> http://www.spip.net/fr_article1828.html .

      J’ai l’impression qu’il te faut revoir un petit peu tes bases avant d’aller plus loin :)

      Bonne soirée.

    • Bonjour xdjuj,

      Pour aller encore plus loin (car j’ai essayé vraiment X possibilités où X>50), alors comment fait-on, en fing deu congte ? Parce que pour l’instant :
      -  (#LATITUDE ne fonctionne pas. Comment peut-on n’afficher les cartes que sur les articles renseignés ? Une idée, en fin de compte ?
      -  Toujours impossible de trouver une soluce pour n’afficher que le pointeur seul de l’article (et non tous les pointeurs d’un coup)

      Car si en ce début d’année tu as la réponse à ces questions en suspend, il y en aura certainement pour apprécier (car il semble que nous soyons vraiment nombreux à vraiment kiffer ce plugin... et à en chercher des fonctionnalités supplémentaires).

    • ad

      Bonjour xdjuj,

      Tu as parfaitement raison, sur le #ID_RUBRIQUE= bla bla grossières erreurs de retranscription sur mon post (et c’est pas la première mais je clique plus vite que mon ombre sur ce genre de choses, contrairement à mon habitude).
      Mais de toute manière, même avec un code spip « propre » sur le plugin entièrement d’origine, on ne peut pas modifier la boucle simplement, comme tu l’as indiqué, (dans le fichier de production du json) car cela ne fonctionne plus, malgré le fait que le json soit valide (enfin il me semble, il me semble surtout que le jQuery.getJSON n’as pas beaucoup d’humour ;) ) ou bien je suis passé a coté, ce qui est fort probable mais je ne suis visiblement pas le seul.

      Pour le « div inclus » je pensais seulement au div que l’on rajoute pour afficher la carte sous le #INCLURE. mauvaise explication de ma part.

      Pour ma méconnaissance SPIP, tu as encore raison, et pour me trouver une bonne excuse je ne l’utilise que depuis un mois et demi et ne suis pas sur d’avoir tout compris... mais bon je fais avec.

      Le fait est que je ne veut pas modifier le code des rubriques ou articles pour insérer une carte et que je préfère la notion de « modèle », j’ai réussi à modifier le code fourni pour arriver à mes fins et c’est à mes yeux le principal même si ce n’est pas très « académique ».

      Merci de tes éclaircissements et de t’être intéressé à mon post.

      Merci encore a ceux qui partagent avec nous des plugins aussi sympa que celui-ci.

      Bonne journée.
      Alex

    • ad

      Bonjour Benolaos

      Désole si le style informatique est un peu tiré par les cheveux (spip et javascript mélés pas terrible...) mais bon moi il me sert bien, probleme quand même avec les bulles des marqueurs qui ne fonctionnent pas correctement (je les ais desactivées dans ce bout de code)...

      Donc ci-dessous un petit script qui doit se deposer dans un repertoire « modeles » que tu auras créé dans le plugin
      googlemaps.

      il se nomme chez moi testmap.html, tu le nomme comme tu veux !
      à condition de l’appeller correctement depuis l’article ou tu le positionneras

      il est appellé directement dans le texte d’un article (espace privé) de cette maniere par exemple :

      <testmap|latitude=48.85000|longitude=2.330000|zoom=11|mapType=HYBRID|
nomCarte=carteComplete|numrub=1>

      les parametres sont en commentaires dans le code

      attention à bien center la carte et le niveau de zoom.

      [(#CACHE{0})]
[(#REM) modele pour afficher une carte GoogleMaps
	parametres:
	|latitude= :latitude de centrage de la carte
	|longitude= :longitude de centrage de la carte
 	|zoom= :zoom appliqué à la carte
	|mapType= : type de carte HYBRID,SATELLITE,ROADMAP
	|nomCarte= : nom du div pour affichage
	|numrub= :numero de la rubrique contenant les articles à afficher
]

[(#SET{latitude,#ENV{latitude}|sinon{#CONFIG{config_gmaps_v3/latitude}}|sinon{42.112614}})]
[(#SET{longitude,#ENV{longitude}|sinon{#CONFIG{config_gmaps_v3/longitude}}|sinon{8.701987}})]
[(#SET{zoom,#ENV{zoom}|sinon{#CONFIG{config_gmaps_v3/zoom}}|sinon{11}})]
[(#SET{mapType,#ENV{mapType}|sinon{#CONFIG{config_gmaps_v3/mapType}}|sinon{SATELLITE}})]
[(#SET{nomCarte,#ENV{nomCarte}|sinon{#CONFIG{config_gmaps_v3/nomCarte}}|sinon{carteComplete}})]
[(#SET{numrub,#ENV{numrub}|sinon{2}})]

[(#SET{icon,#ENV{icon}|sinon{#CHEMIN{theme/img/marqueurmap.gif}}})]
[(REM) affichage du div recevant la carte]
<div id="carteComplete" style="width:100%; height:350px"></div>

<script type="text/javascript" charset="utf-8">
function affichageNormal(){
	var latLng = new google.maps.LatLng(#GET{latitude},#GET{longitude});
	var options = {center: latLng,zoom: #GET{zoom},mapTypeId: google.maps.MapTypeId.#GET{mapType}	};
	var laCarte = new google.maps.Map(document.getElementById("#GET{nomCarte}"), options);

<BOUCLE_LesArticles(ARTICLES){id_rubrique=#GET{numrub}}>

		var leTitre ="#TITRE"
		var LatLng = new google.maps.LatLng('#LATITUDE','#LONGITUDE');
		var marqueur = new google.maps.Marker({position: LatLng,title: leTitre ,map: laCarte,icon: '[(#GET{icon})]'});

	  	var contenuInfoBulle = '<div class="conteneurInfoBulle">' +
	  		'<h2>Votre Titre:</h2>' + '<br />' + leTitre + '<br />'
			'</div><!-- .conteneurInfoBulle -->';

	 	var infoWindow = new google.maps.InfoWindow({content:contenuInfoBulle});
	 	//infoWindow.open(laCarte,marqueur);
		//	google.maps.event.addListener(marqueur, 'click', function() {infoWindow.open(laCarte,marqueur); });
</BOUCLE_LesArticles>
		};

jQuery(document).ready(function() {affichageNormal();});
</script>

      En esperant que cela puisse au moins servir à une personne, en attendant que je comprenne mieux comment le javascript fonctionne (mais pas le temps pour l’instant je me bat avec les boucles spip).

      A plus
      Alex

    Répondre à ce message

  • 2
    ad

    Re bonjour,
    Je me heurte a un pb dans le code que j’ai soumis à l’instant
    dans le fichier « json-mes-articles.html » la boucle article :

    <BOUCLE_LesArticles(ARTICLES){par id_rubrique}>
...
</BOUCLE_LesArticles>

    Le pb est que le filtre par id_rubrique ne fonctionne pas et j’affiche sur la carte des marqueurs issus d’article provenant d’autres rubriques.
    Quelqun aurait t’il une idée ? probleme d’envoi du contexte ?
    Merci
    Bonne journée
    Alex

    • ad

      Re bonjour xdjuj,
      Comme je le signifiais à l’instant, j’ai écris sur les posts sans me relire avant de cliquer.
      La preuve sur le post du dessus ou je pensais écrire {id_rubrique= #bla bla} et non pas
      {par id_rubrique} qui ne veut effectivement rien dire.
      Désolé, je comprends que vous ne puissiez pas m’aider dans ce cas précis.

      Merci encore.
      Alex

    • xdjuj

      Je ne sais plus où sont tes problèmes en fait :D

      Essaye une boucle genre
      <BOUCLE_LesArticles(ARTICLES){id_article}> pour afficher sur tes articles.

      Sinon comme indiqué c’est une contrib en chantier, elle est vide de variantes pour le moment, elle est donc plutôt destinés à ceux qui savent déjà utiliser l’API de Google.

      Tu trouveras 2 plugins parfaitement fonctionnels, beaucoup plus complets et activement tenus à jour ici :

      Ca te fera sûrement gagner du temps tant que cette contribution n’est pas plus avancée :)

    Répondre à ce message

  • 3
    troOn

    Merci pour ce plugin tout frais tout beau :)

    Mais évidemment, je galère sur un problème basique : je ne sais pas exactement à quoi il sert !

    Je m’explique : j’ai besoin de diverses cartes liées à divers articles, et ne voudrais donc afficher ces cartes que dans les articles appropriés. Mais je n’ai pas compris si c’est une possibilité offerte par le plugin ici-présent ?

    J’ai bidouillé comme j’ai pu les fichiers d’exemple, je me suis créé un json-article que j’appelle ainsi, dans la boucle articles :

    <INCLURE{fond=theme/js/gmaps_v3.js,nomCarte=carteComplete,mapType=ROADMAP,json=json-article,zoom=15}{id_article} />

    et dans ledit nouveau fichier, j’ai simplement ajouté un id_article à la boucle principale, mais rien n’y fait, j’affiche toujours la carte par défaut, et celle-ci s’affiche sur TOUS les articles, et non sur les uniques articles possédants une carte renseignée.

    Du coup dans ma boucle articles j’ai testé en php si #LATITUDE était renseignée mais bon, c’est pas propre, ca ne met pas mon joli marqueur et je dois m’y prendre comme un pied :)

    Je veux bien des conseils et une accolade dans le dos pour me rassurer sur ma santé mentale !

    merci

    • benolaos

      Bonjour,

      Je suis à la recherche de la même fonctionnalité : n’afficher la carte que sur les articles renseignés par des coordonnées.

      (qui plus est, et pour corser la chose, je voulais pouvoir n’afficher que le repère du-dit article et non tous les repères comme c’est le cas par défaut...)

    • xdjuj

      Bonjour :)

      Je vois en fait 2 questions :
      -  comment n’afficher que le marqueur d’un article
      -  comment n’afficher la carte que sur les articles ayant un marqueur.

      troOn a répondu à la première question, il suffit de s’inspirer de json-tousLesArticles, de faire la boucle qui vous intéresse (cf. doc de SPIP sur les boucles) et ensuite dans le gabarit article.html ou équivalent qui génère votre page, appeler le fichier json nouvellement créé toujours comme expliqué par troOn.

      Quand à n’afficher cette carte QUE sur les articles ayant un marqueur, c’est ici un problème de SPIP de base, lié aux squelettes :) La réponse de troOn est également bonne, mais en SPIP c’est plus propre. Il convient dans dans le gabarit article.html (ou rubriqueXX.html ou dans le gabarit SPIP dans lequel vous avez inséré votre inclure) d’appeler l’inclure avec un test, par exemple :

      		[(#LATITUDE|oui)
		<INCLURE{fond=theme/js/gmaps_v3.js,json=json-affichagePerso} />
		<div id="carte_gmaps_v3" style="width:100%; height:50%"></div>
		]

      Tout simplement. Il peut aussi convenir d’utiliser le filtre |sinon de SPIP ( http://www.spip.net/@ ).

    • Merci à xdjuj pour cette réponse aussi rapide que constructive.

      Pour ajouter une touche d’interactivité supplémentaire, je cherchais à
      1) intégrer l’URL des marqueurs (en cliquant sur un marqueur, on serait renvoyé vers la page...)
      2) créer plusieurs types de marqueurs (de couleurs différentes en faisant appel à la fonction mot-clé par exemple...)

      Une idée pour construire ces ajouts au squelette ?

    Répondre à ce message

  • 1
    Illef

    Ce plugin est attendu comme le messie !

    Une fois installé sur une version SPIP 2.1.2 [16017] avec les autres plugins :

    Partie privé :
    -  Plugins s’installe facilement : Articles, cfg,3 champs articles (Latitude, Longitude, Adresse) OK.
    -  Dans la partie article il manque le champ liste déroulante : Type
    -  Les 3 autres champs se remplissent bien avec les bonnes coordonnées .
    -  les 3 valeurs sont bien inscrites dans la base de données Mysql dans la table Article
    -  Créations d’une dizaine de points (articles) et validation pour les tests

    Partie public :

    -  La carte exemple s’affiche bien avec le bon centrage et l’échelle configuré dans la partie CFG
    -  Aucun point repère sur la carte  :-((
    -  Le lancement de spip.php ?page=json-tousLesArticles génère un fichier vide qui se termine par un « Array » et qui grandie à chaque fois qu’on rajoute des points sur la partie privé.

    Merci pour le Plugin et bon courage pour la suite !

    • xdjuj

      Bonjour :)

      Partie privée le champ type est produit par un autre plugin non nécessaire, c’est une erreur dans le screenshot, ou plutôt une information non nécessaire :)

      Partie public le JSON renvoi une « array », cette array doit contenir des points, il est important que latitude ET longitude soient bien renseignés (dans l’affichage par le fichier JSON). Sinon, le problème est ailleurs :)

    Répondre à ce message

  • 2
    luapmada

    Bonsoir, plugin tres sympa et facile à mettre en place (j’ai butésur GIS...).

    Il est tout chaud à ce que je vois.

    je n’ai pas bien compris comment - simplement - changer l’appel pour modifier le logo des marqueurs.

    j’attends avec impatience les évo, et je ne suis pas le seul. Merci +++ pour ce beau travail.

    • xdjuj

      Salut Luapmada :)

      Pour l’instant le « simplement » est très simple pour celui qui connaît un tant soit peu l’API Google en agissant sur le fichier json-TrucMuche.html :) Pour les autres (comme toi peut être) il faudra attendre qu’on ait le temps de re-bosser dessus, sûrement cette semaine :)

    • luapmada

      Salut,
      j’ai bien modifié le code json comme ca :

      [(#SET_PUSH ’lesMarqueurs’, #ARRAY
      titre,#GETleTitre|supprimer_numero,
      descriptif,#GET#CHAPO,
      latitude,#LATITUDE,
      longitude,#LONGITUDE,
      icon,#LOGO_ARTICLE,      )]

      mais le logo _article ne passe pas sur la map. alors j’ai pour l’instant triché en modifiant le png gmap, solution temporaire bien sur. :)

    Répondre à ce message

  • 6

    Carissimi
    scusate la mia ignoranza e grazie per il vostro aiuto ma continuo a non capire cosa manca questo è il codice della pagina generata che sembra a posto ma sul sito non si vede nulla

    se potete illuminarmi grazie mille
    ====================================================

    <script type="text/javascript" charset="utf-8">
    function affichageNormal(){
    var latLng = new google.maps.LatLng(45.84886,8.67049);
    var options = {
    center: latLng,
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.HYBRID};
    var laCarte = new google.maps.Map(document.getElementById("carteComplete"), options);
    var infoWindow = new google.maps.InfoWindow();

    var url="http://www.istitutorosetum.it/spip.php?page=json-tousLesArticles";
    jQuery.getJSON(url,function(lesMarqueurs){
    jQuery.each(lesMarqueurs,function(i,leMarqueur){
    var marqueur = new google.maps.Marker({
    position: new google.maps.LatLng(leMarqueur.latitude,leMarqueur.longitude),
    title: leMarqueur.titre,
    map: laCarte,
    icon: 'plugins/googlemaps_api_v3/theme/img/gmaps_v3-24.png'
    // draggable: true,
    });
    });
    });
    }

    jQuery(document).ready(function() {
    affichageNormal();
    });
    </script>

    div id=« carteComplete » style=« width:100% ; height:50% »>

    ho tolto < per far vedere il div

    • xdjuj

      Your configuration is ok and well centered on Italia :)

      But there’s not any Marker as you can see here :
      http://www.istitutorosetum.it/spip.php?page=json-tousLesArticles
      (scroll to the bottom of the page)

      • Have you entered the good information for your Marker ? Because latitude & longitude are NULL, it could be because you haven’t spell well the complete adresse of your interest point and Google maybe failed to find the coordinate of your localisation
        You must fill the « Adresse » field THEN click on « Localiser sur la carte ». The Marker should appear on the map with « Latitude » and « Longitude ».
      • Have you access to the SQL spip_articles table ? You should have 3 news rows « latitude/longitude/adresse_complete ». If not, it’s normal not to have anything, try to reinstall the plugin.

    • meme probleme - l’appel du script se fait parfaitement .

      y compris dans le fichier json, les coordonnées apparaissent mais la carte n’apparait pas sur un article public. (copié collé du modele)

      cela marche pourtant avec le code du fichier de demonstration sommaire.html... étrange

      y a t’il un également un moyen d’ajouter des infos bulles ?

    • xdjuj

      C’est que le problème n’est pas le même ! ;-)

      Attention le fichier d’exemple montre 3 manières d’appeler la carte avec des « options » différentes.

      • Il faut respecter le ID donné à la carte (il doit correspondre à celui donné par nomCarte ou défini par défaut dans les configurations
      • Il faut se méfier de ne pas laisser le centrage par défaut (qui centre sur la Corse)
      • Il faut se méfier du Zoom par défaut (qui est peut être trop serré, les points sont peut être en dehors de la carte affichée

      Mais si la carte s’affiche ET que le fichier JSON sort une liste avec des latitudes et des longitudes renseignées (ce qui n’est pas le cas de Luciano, pour qui les points ne sont pas remplis), alors les marqueurs s’afficheront ! (s’ils fonctionnent avec le fichier d’exemple, c’est que tout doit bien se passer ;-) ).

      Pour les infobulles oui mais pas sur cette version ! C’est 3 fois rien mais pas encore commité, dans la semaine avec encore d’autres options normalement :)

    • christian

      meme pb rien ne s’affiche sur l’espace public une distrib en 2.1.2
      la balise insert head est bien inséré !
      la carte est inséré sur un article à l’aide de

      pas de problème non plus dans l’interface privée

    • xdjuj

      Même question : que renvoi l’appel au fichier JSON spip.php ?page=json-tousLesArticles ?

    • xdjuj

      Le inclure se fait depuis les squelettes, depuis les articles il faut utiliser un modèle, on va mettre un modèle alors car ça semble confusant pour le plus grand nombre :)

    Répondre à ce message

  • 4

    rien ne s’affiche sur l’espace public une distrib fraiche du jour en 2.1.2

    la balise insert head est bien inséré !

    la carte est inséré sur un article à l’aide de

    <INCLURE{fond=theme/js/gmaps_v3.js,nomCarte=carteComplete,mapType=HYBRID,json=json-tousLesArticles,zoom=17} />

    pas de problème dans l’interface privée, c’est du beau boulot !!

    une petite question : comment faire pour modifier les marqueurs (j’adorais cette fonction dans l’anicenne version du plug)

    le plugin gis n’est plus nécessaire semble t’il pour l’affichage dans l’espace public ?

    • l’id de la carte avait bien été renseigné

      de même la page
      spip.php ?page=json-tousLesArticles
      ne retourne rien // page blanche

    • xdjuj

      Salut «  ? » ;-)

      Tu utilises carteComplete en nom de carte. Vérifie donc que dans ton squelette tu disposes bien d’une div vide avec le bon ID.

      <div id='carteComplete'></div>

      Sans elle, pas de carte. Ensuite, comme dit à Luciano, pense bien à régler ton Zoom et à centrer par défaut correctement la carte pour voir les points (sinon tu vois un bout de Corse à la place ;-) ).

      Vérifie aussi que tu n’as pas de bug jQuery avec Firebug qui empêcherait l’affichage de la carte.

      Ce plugin n’est pas « la nouvelle version de l’ancien », c’est un plugin qui utilise la nouvelle version de l’API chez Google. Il n’est pas du tout encore abouti comme peut l’être GIS. Il ne nécessite aucun autre plugin de carto ni de clef, il est autonome.

      Les marqueurs sont modifiables depuis les articles, dans la ToDo liste il reste à permettre de les déplacer directement sur la carte, c’est fonctionnel mais pas commité, on doit adapter au plugin « générique ».

      On doit rajouter plein de belles choses, mais la lecture même du fichier tousLesArticles doit te permettre de créer tes propres cartes très simplement (tu verras que la boucle est très simple et la syntaxe aussi).

    • j’ai pas réussi a faire fonctionner la carte sur l’espace public ( malgré l’id renseigné, et la div vide) dommage ! je vais attendre quelques retour avant de m’acharner.

      je suis sur une adresse dev type le problème vient peut etre de la , j’ai souvenir que gmap était capricieux avec ce type d’adresse.

      en tout bravo pour ce dev on en revait depuis longtemps !

    • xdjuj

      Justement, plus de problèmes d’adresse dev ou pas dev, ça n’a plus aucune importance, c’est une des bonnes choses de cette nouvelle API.

      Tes articles sont bien publiés ? Depuis la partie privée tu vois bien tes points ? Car « json-tousLesArticles » fait une boucle sur tous les articles (publiés) de ton site à la recherche de marqueurs.

      Il n’y a pas de raisons que ça ne fonctionne pas à partir du moment où les points sont bien renseignés dans les articles (que tu les vois en base de donnée par exemple).

    Répondre à ce message

  • 1
    luciano

    Ho usato Google Maps API v3 e mi sembra tutto a posto ma poi non vedo niente quando apro l’articolo.

    Nell’area riservata funziona tutto ma poi non visualizza.

    Qualcuno lo ha già provato e con quali plugin ?

    • xdjuj

      Hi Luciano :)

      Have you inserted in your skeleton a div with the ID you configure in the administration of the plugin ?

      Did you try one of the example given in the example/ folder in the plugin ? Have you look for an jQuery error using Firebug ?

      If you can see a map, everything may be right, but don’t forget to choose a defaut CENTER and a defaut ZOOM from the configuration Panel, maybe you’re only observing the sea, in Corsica ;-) If you zoom back, you’ll certainly view your points.

      Let us know.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom