[SPXGOOGLEMAPS] affichage carte google (via shortcode)

je-evrard · novembre 2013

Ce plugin va vous permettre d'insérer une carte google maps dans un article, page statique ou fichier du thème via un shortcode.

Le shortcode est automatiquement declare et le plugin spxshortcodes doit être activé.

exemple d'usage avec la clé api optionnelle:

[== Indéfini ==]
[SPXWGOOGLEMAPS title='chez moi' lattitude=43.2951 longitude=-0.3707970000000387 content='Pau France' key='xxxxxxxx']

Tout est dans l'aide du plugin...

Niveau d'usage : facile

Téléchargement 1.3 ici

Historique :
**** v 1.3 ****
- add key param in shortcode for google api
**** v 1.2 ****
- change help for 5.5

**** v 1.1 **** (09/03/2015)
- add shortcode [SPXWGOOGLEMAPS]

***v1.0*** (05/11/2013)
+ [LAUNCH] version de base

Jerry Wham · novembre 2013

Et tu peux nous faire le même avec openstreet maps ??? {)

je-evrard · novembre 2013

Tu parles de ça openstreetmap

Jerry Wham · novembre 2013

Plutôt

<div id="mini_map" style="height: 400px; width: 100%;"></div>

dans body et

<script type="text/javascript">
	if(typeof(jQuery) === "undefined") {document.write('<script  type="text/javascript" src="jQuery.1.8.1.min.js"></script>');}
</script>
<script type="text/javascript" src="openStreetMaps/leaflet-0.4.js"></script>
<script type="text/javascript" src="openStreetMaps/osmLeaflet.jquery.js"></script>
<script>
    $(document).ready(function () {
        var $mini_map = $("#mini_map");

       // Map de démo centrale
        $mini_map.osmLeaflet({
            zoom      : 1,
            latitude  : 44.5,
            longitude : 44
        });
		$mini_map.osmLeaflet('addPopup', {
            latitude  : 44.5,
            longitude : 44,
            content   : 'On voit ma maison.....'
        });
        $mini_map.osmLeaflet('addMarker', [
            { latitude : 44.5, longitude : 44, click : 'coucou'}
        ]);
    });
</script>

Ou un truc du style...

Plus d'infos ici et là.
L'intérêt c'est que c'est libre.

Frédéric · novembre 2013

Merci Jerry pour OpenStreet, je l'ai intégré sur mon site du coup

Pour le code pourquoi ne pas tout simplement chargé l'iframe ? cela évite Jquery et autre lib js.

Iframe Openstreet a écrit:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=2.1903991699218746,48.72720881940671,2.4176788330078125,48.99013049482068&layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="http://www.openstreetmap.org/?relation=71525#map=12/48.8588/2.3040">Afficher une carte plus grande</a></small>

Jerry Wham · novembre 2013

Pour pouvoir la paramétrer dynamiquement à l'aide du tableau js et d'un peu de php comme je l'ai fait avec mon plugin openstreetmap (je vous laisse chercher le lien car j'écris avec mon tel)

je-evrard · novembre 2013

jerry a écrit:

Et tu peux nous faire le même avec openstreet maps ???

Tu veux vraiment que je fasse un plugin de openstreetmap alors que ton plugin existe ?

Francis · novembre 2013

D'où l'intérêt de pouvoir piocher les contenus des autres plugins, à partir du plugin shortcodes !

Jerry Wham · novembre 2013

Pas un plugin, un shortcode.

je-evrard · novembre 2013

jerry a écrit:

Pas un plugin, un shortcode.

Pas de problème mais il faut que tu prévois un hook de get content :

[== PHP ==]
$this->addHook('openstreetmaps::getcontent', 'getContent');

public function getContent($o) {
		if ($o["lattitude"] == "") $o["lattitude"]= '51.486782';
		if ($o["longitude"] == "") $o["longitude"]= '-0.143242';
		
		
		return "\n".'
		
			ton html avec tes variables php

               ';
	}

Et ce sera bon pour créer un shortcode de ce type dans le fichier de config du thème (pour le moment) :

[== PHP ==]

function openstreetmaps_func($atts) {
	global $plxShow;
	
	
	extract(shortcode_atts(array(
		'lattitude' => '51.486782',
 		'longitude' => '-0.143242',
		...
 	), $atts));
	
	
	$o = array();
	$o["lattitude"]= $lattitude;
	$o["longitude"] = $longitude;
	...
	
	return ($plxShow->callHook('openstreetmaps::getContent',$o));
}
# w comme widget
add_shortcode('WOPENSTREETMAPS', 'openstreetmaps_func');

PPmarcel · mars 2015

Il est au top ton plugin. Jusqu'ici j'ai toujours cru qu'il fallait paramétrer les coordonnées en dur dans le code, ce que je trouvais rébarbatif.

Mais en réalité il ne s'agit que de valeurs par défaut qu'on peut modifier dans un article via la balise [WGMAPS ...].
Ca mériterai d'être expliqué plus clairement dans le sujet de ce thread et dans l'aide du plugin.

je-evrard · mars 2015

Merci.

Mise a jour en 1.1

**** v 1.1 ****
- add shortcode [SPXWGOOGLEMAPS]

***v1.0***
- First release.

Le plugin génère automatiquement le shortcode pas besoin de le déclarer dans le thème.

[SPXWGOOGLEMAPS title='chez moi' content='Mon adresse en detail' lattitude=51.486782 longitude=-0.143242]

Pour la mise à jour automatique vous pouvez passer par spxplugindownloader

a+

jéjé

PPmarcel · mars 2015

je-evrard a écrit:

Le plugin génère automatiquement le shortcode pas besoin de le déclarer dans le thème.

[del]D'autant mieux ! Je te recommande de mettre à jour ton premier post, pour que ça reste clair pour les prochains qui viendront dessus.[/del]

Edit : en supprimant mon config.php, la balise n'est plus interpretée par le plugin. Je peux la lire texto dans l'article ([WGMAPS...])

je-evrard · mars 2015

Le shortcode à change de nom : SPXWGOOGLEMAPS

PPmarcel · mars 2015

En effet, je n'avais pas relevé ce changement. Tout marche. Bravo encore une fois.

PPmarcel · mars 2015

Hello je-evrard,

Depuis la mise à jour, j'ai remarqué que l'aide du plugin avait disparue.
Or elle est utile pour retrouver la commande exacte de la balise.

Peux-tu la remettre ?

Matthieu

je-evrard · mars 2015

Bonjour,

Je n'ai pas enlevé l'aide je l'ai juste modifié. Il n'y a plus besoin de préciser qu'il faut créer un shortcode puique le plugin le fait automatiquement.

Voici l'aide :

[== Indéfini ==]
Aide du plugin spxgooglemaps
Ce plugin va vous permettre d'insérer une carte google maps dans un article, page statique ou fichiers du thème..
Le plugin va créer automatiquement (depuis la version 1.1) un shortcode googlemaps, le plugin spxshortcodes doit être activé.
Pour appeler le shortcode, utilisez la syntaxe suivante n'importe ou dans votre site :
 
[SPXWGOOGLEMAPS title='chez moi' content='Mon adresse en detail' lattitude=51.486782 longitude=-0.143242]
 
Pour plus de détails sur les shorcodes : http://codex.wordpress.org/Shortcode_API
 
A noter : le plugin utilise un css simple que vous pouvez modifier :
#spxgooglemaps_frame{

background:#fff;

padding:15px;

box-shadow: 0 0 20px #999;

border-radius:2px;

}

#spxgooglemaps_map {

  height:300px;

  background:#6699cc;

  }

a+

jéjé

PPmarcel · mars 2015

Ah oui tiens c'est étrange, sur 3 instances pluxml je n'en n'ai qu'une qui n'affiche pas l'aide justement. Et c'est sur celle-ci que je bossais en ce moment.

Ca vient probablement de mon côté du coup.

je-evrard · juillet 2015

Le plugin dans cette version est comptatible 5.4. Pour info.

je-evrard · avril 2016

Mise a jour 1.2 pour pluxml 5.5

mbouchaud · juillet 2016

Bonsoir,

J'ai réussi à déployer mon prototype (visible ici http://colonelreyel.fr/) sur le serveur d'hébergement final qui est hélas free http://gapplongee.free.fr.
Après avoir découvert les plaisirs de la configuration spécifique du fichier .htaccess, je m'attaque maintenant à analyser certains dysfonctionnements comme le problème que je rencontre avec SPXGOOGLEMAPS.

Par exemple, sur la page http://gapplongee.free.fr/index.php?article4/saint-nazaire la map est affichée puis remplacer par une image contenant un point d'exclamation.

Est-ce que le plugin est incompatible avec le contexte ou bien est-ce qu'il y a une configuration spécifique à mettre en oeuvre.
Je vous remercie d'avance pour votre retour.

Jaseur Boreal · juillet 2016

Bonjour,

La map google se voit l'espace d'une demi seconde, et ensuite est remplacée par une image contenant un point d'exclamation avec message d'erreur;

"Petit problème... Une erreur s'est produite
Google Maps ne s'est pas chargé correctement sur cette page. Pour plus d'informations techniques sur cette erreur, veuillez consulter la console JavaScript."

J'observe aussi le même phénomène sur la section contact de www.jaseurboreal.eu
qui me sert en partie de tests.
Par contre c'est impeccable pour une insertion de carte OPENSTREETMAP par iframe : cela fonctionne parfaitement.

A tout hasard, Goooogle aurait-il changé, c'est la période mi-annuelle, quelques données liées à l'API Google map ?

Merci de toutes pistes de solution ?

je-evrard · juillet 2016

Bonjour,

Veuillez verifier si il n'y a pas de conflit javascript avec éventuellement un autre plugin en les désactivant. Merci du retour.

Comme on peut le voir ici ce n'est pas google qui est a mettre en cause : demo-spx5/googlemaps

Jaseur Boreal · juillet 2016

Bonjour Jérôme du Béarn,

Pour tester, j'ai désactivé quelques plugins en laissant actifs les principaux :
[list=*]
[*]spxplugindownloader - Version 2.5 (19/08/2015)[/*]
[*]spxwthemesimple - Version 0.8 (20/05/2016)[/*]
[*]spxdatas - Version 1.86 (24/02/2016)[/*]
[*]spxshortcodes - Version 1.3 (28/10/2013)[/*]
[*]spxusefulshortcodes - Version 1.1 (17/06/2016)[/*]
[*]spxgooglemaps - Version 1.2 (05/11/2013)[/*]
[/list]

Sur la page http://www.jaseurboreal.eu/article2/localisation-cartes-maps

On a bien pendant une seconde l'affichage d'une carte palloise, mais bizarre, elle disparaît ensuite derrière le message d'erreur. S'est-elle égarée en vallée d'Aspe ?

Faudrait-il maintenant un compte google identifié par domaine avec une api-key pour valider l'api-google maps ? Car il en faut un maintenant pour youtube quand on incorpore (par exemple dans spip) un plugin vidéo youtube.
Les différentes API-Google Maps sont ici : https://developers.google.com/maps/get-started/?hl=fr

J'ai trouvé ceci sur le même sujet récent dans wordpress après une recherche:

"- depuis le 26 juin, tout nouveau site web (nouveau nom de domaine) aurait un frais à payer pour utiliser les Googles Maps.
- pour les sites mis en ligne avant le 26 juin (cf nom de domaine), c'est gratuit mais il faut créer/utiliser un API key pour que les Googles Maps fonctionnent (et encore cela ne marche pas pour tous les sites dont le mien)
Source: https://wordpress.org/support/topic/google-maps-api-error-missingkeymaperror-1#post-8561039 "

Google api translate a écrit:

Chaque demande à une API qui est représentée dans la console API doit inclure un identifiant unique. Les identifiants uniques permettent à la console de lier des demandes de projets spécifiques pour surveiller le trafic et faire respecter les quotas.

Google prend en charge deux mécanismes pour créer des identifiants uniques:

OAuth ID client 2.0: Pour les applications qui utilisent le protocole OAuth 2.0 pour appeler les API Google, vous pouvez utiliser un client OAuth 2.0 ID pour générer un jeton d'accès. Le jeton contient un identifiant unique. Voir Configuration OAuth 2.0 pour plus d' informations.

Clés API: Une clé API (soit une clé de serveur ou une clé de navigateur) est un identifiant unique que vous générez en utilisant la console. L'utilisation d'une clé API ne nécessite pas d'intervention de l'utilisateur ou le consentement. Les clés API ne donnent pas accès à toute information de compte, et ne sont pas utilisés pour l'autorisation.

Utilisez une clé API lorsque votre application est en cours d'exécution sur un serveur et accéder à l'un des types de données suivants:
Les données que le propriétaire des données a identifié comme public, comme un calendrier public ou blog.
Les données qui sont la propriété d'un service Google tels que Google Maps ou Google Translate. (Limitations d'accès peuvent s'appliquer.)

source : https://support.google.com/googleapi/answer/6158857?hl=fr

Précisions : comment créer une clé API Google :

Mise en place des clés de l'API

Si votre application cliente n'utilise pas OAuth 2.0, alors elle doit inclure une clé API lorsqu'elle appelle une API qui est activée dans un projet Google Cloud Platform. L'application passe cette clé dans toutes les demandes de l' API en tant que key=API_key paramètre.

Pour créer la clé API de votre application google:

Aller à l' API Console .

Dans la liste des projets, sélectionnez un projet ou créez en un nouveau.

Si la page d'API Manager n'est pas déjà ouverte, ouvrez le menu Gallery Menu et sélectionnez API Manager.

Sur la gauche, choisissez de vérification des pouvoirs.

Cliquez sur Créer des informations d' identification, puis sélectionnez la clé API.

Choisissez le type de clé à utiliser. (Types d'API clés sont décrits plus en détail dans les sections suivantes.) Si vous n'êtes pas sûr que ce soit une clé API appropriée pour l'API que vous appelez, sélectionnez Aide - moi à choisir et suivez les instructions pour prendre les bonnes références.

Remarque: En plus de lire les instructions sur cette page, assurez - vous de lire les meilleures pratiques pour l' utilisation en toute sécurité des clés de l' API .

L'API prend en charge plusieurs types de clés API, y compris les touches de serveur, les touches du navigateur, les clés iOS et Android touches.

Continuons les recherches ...
Cordialement

mbouchaud · juillet 2016

Le problème est reproductible sur différents (OS, navigateurs et versions) avec uniquement les 2 seuls plugins d'activés suivants : spxshortcodes, spxgooglemaps.

Pour information, je constate que le problème est reproductible sur un site hébergé chez free http://gapplongee.free.fr/index.php?article5/le-croisic-centre-technique-estival et le même site hébergé chez OVH fonctionne normalement.

Avez-vous une autre piste SVP pour corriger le problème ?

Jaseur Boreal · juillet 2016

Bonjour aux détecteurs de solutions,

Je ne pense pas que cela soit un problème d'hébergeur,
car ce site test déposé dans un nid, bien calfeutré avec des plumes,
dans le petit bois derrière chez moi à coté du canal de Roubaix chez OVH
reproduit l'erreur googlemaps ici dans la page contact : http://www.jaseurboreal.eu/#section-contact

L'article plus précis pour tester est ici avec deux cartess : une google maps, et une openstreetmap bien visible.
http://www.jaseurboreal.eu/test/localisation-cartes-maps

Une carte google apparaît quelques secondes et ensuite c'est l'erreur qui s'affiche ...

Bizarre, bizarre vous avez-dit

mbouchaud · juillet 2016

Dans un autre contexte (Windows 7, IE 11), j'ai toujours le problème d'affichage de la map sur ma page http://gapplongee.free.fr/index.php?article4/saint-nazaire

Est-ce que quelqu'un à trouver une solution pour résoudre le problème ?
Existe-t-il un autre plugin opérationnel ou une autre solution ?

je-evrard · juillet 2016

Mise a jour en 1.3 pour rajouter le paramètre de la clé d'activation api google (paramètre optionnnel)

exemple:

[== Indéfini ==]
[SPXWGOOGLEMAPS title='chez moi' lattitude=43.2951 longitude=-0.3707970000000387 content='Pau France' key='xxxxxxxx']

**** v 1.3 ****
- add key param in shortcode for google api

Note : Pour les utilisateurs de simplebox vous pouvez forcer le javascript du thème en rajoutant la ligne suivante :

[== Indéfini ==]
function loadScriptGooglemap() {
	
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = 'http://maps.google.com/maps/api/js?sensor=false&amp;language=en&key=xxxx&' +
  'callback=display_gmap';
	document.body.appendChild(script);
}

Remplacer xxxx par la clé d'activation google.

Jaseur Boreal · juillet 2016

Merci Jérome,

La modif "secret simple box", est bien dans : ' /js/custom.js"

Je teste cette maj.

Jaseur Boreal · juillet 2016

Apparemment cela ne fonctionne toujours pas avec la clé api js google map ajoutée dans le code js :

1. Dans un article avec shortcode googlemaps une carte s'affiche quelques courts instants et ensuite disparait pour afficher l'erreur visible ici :
http://www.jaseurboreal.eu/test/localisation-cartes-maps

2. Sur la page contact du thème simplebox l'affichage de l'erreur google maps n'est plus, c'est du blanc à la place sans carte.

Y aurait-il une erreur de transcription dans le fichier /js/custom.js du thème ?


function loadScriptGooglemap() {
	/*var script = document.createElement("script"); 
	script.type = "text/javascript";
	script.src ="http://maps.google.com/maps/api/js?sensor=false&amp;language=en;
	document.body.appendChild(script); 
  
  
	var script2 = document.createElement("script"); 
	script2.type = "text/javascript";
	script2.src = GMAPSCRIPT;
	document.body.appendChild(script2);
  
	var gmapdelay = setTimeout("display_gmap()",2000);*/
	

        var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = 'http://maps.google.com/maps/api/js?sensor=false&amp;language=en&key=AbcdEEfjutxxxmmpl_&' +
  'callback=display_gmap';
	document.body.appendChild(script);


}

je-evrard · juillet 2016

Tu peux me zipper ton site dans son intégralité que je regarde ça de près merci.

[SPXGOOGLEMAPS] affichage carte google (via shortcode)

Réponses