Google Maps API v3

Code work in progress

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 :

Portfolio

updated on 2 October 2019

Discussion

16 discussions

  • 3

    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 :

    1. <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

    • 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...)

    • 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 ?

    Reply to this message

  • 1

    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 !

    • 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 :)

    Reply to this message

  • 2

    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.

    • 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 :)

    • 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. :)

    Reply to this 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

    • 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 ?

    • 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
      js/gmaps_v3.js,nomCarte=carteComplete,mapType=HYBRID,json=json-tousLesArticles,zoom=17} />
      pas de problème non plus dans l’interface privée

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

    • 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 :)

    Reply to this 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

    • 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.

      1. <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 !

    • 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).

    Reply to this message

  • 1

    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?

    • 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.

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom