Une carte pour localiser des lieux, des événements ou des informations géopolitiques par exemple, ça peut être sacrément sympa. Alors il y a la solution d'aller créer sa carte sur Google maps puis de la placer sur son blog à l'aide du code html fourni. Mais il y a plus sympa: La définir directement au sein du blog. C'est ce que permet Gmaps.js

1. Exemples

2. Mise en place

Comme toujours, il va falloir charger des scripts. Le premier est récupéré directement chez Google. Pour le second, téléchargez le ici: https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js puis enregistrez le parmi les fichiers de votre blog sous le nom gmaps.js

C'est quasiment fini.

Dans l'article ou la page concernés, créez une balise <div> en lui donnant l'id "map" puis placez le code correspondant à la carte que vous avez créée.

Cela vous donne:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="url du fichier gmaps.js"></script>
<div id="map"> </div>
<script>
onJSFilesLoaded.push(function(){
map = new GMaps({
  div: '#map',
  zoom: 5,
  lat:47.497035,
  lng:2.483923,
  click: function(e) {
    alert('Vous avez cliqué sur la carte');
  }
});
});
</script>

3. Informations complémentaires

Voici quelques lien si vous souhaitez aller un peu plus loin.

Exemples sur le site officiel

Documentation

Informations complémentaires