Carte intéractive

• 

  tifaeris · Membre · août 15, 2018 at 4:49

  • Copier le lien
  • Ajouter le thème aux favoris

  Bonjour,

  Est-il possible de créer une carte intéractive sur le même modèle que ce site :http://www.balades-naturalistes.fr/test-accueil/journal-de-voyage/#Iran ?

  Sur google j’ai juste réussi à créer ça : [googlemaps https://www.google.com/maps/d/u/0/embed?mid=1HOoGfgrgjl4KvmbKn9zl33sHQTobDz-y&w=640&h=480%5D
  seulement je n’arrive pas à créer de lien direct vers les articles comme sur l’exemple (modifier le lien direct du marqueur google en fait).

  Merci !

  L’adresse du blog concerné est (visible uniquement pour les utilisateurs connectés).

• 

  airodyssey · Modérateur · août 15, 2018 at 5:21

  • Copier le lien

  Bonjour. Je vous invite à revoir la réponse fournie il y a quelque temps.
  https://fr.forums.wordpress.com/topic/integrer-une-carte-interactive/

• 

  tifaeris · Membre · août 15, 2018 at 7:09

  • Copier le lien

  Bonjour, merci de votre réponse.

  En fait c’est un peu différent, j’ai mal exprimé ma demande. Dans le sujet du mois de janvier, je voulais simplement intégrer une carte dans un article ponctuel, dans la rédaction de celui-ci.

  Là, ça serait pour afficher une mappemonde sur le côté du site (la sidebar il me semble) sur laquelle on pourrait voir où ont été faits tous les articles de mon site. Mais que chaque point soit directement cliquable (comme dans l’exemple fourni).

• 

  tifaeris · Membre · août 17, 2018 at 1:49

  • Copier le lien

  J’ai commencé à créer une carte de tous mes articles sur google fusion tables. Lorsque je veux partager cette carte, plusieurs choix s’offrent à moi :
  J’ai soit un code iframe.
  Soit un code html.

  Le souci, c’est que j’aimerais intégrer cette carte à ma barre latérale (en espérant qu’elle soit cliquable pour pouvoir être affichée en plus grand, mais ça ça sera à voir dans un deuxième temps).

  Donc j’insère un widget html personnalisé. Je teste l’iframe, mais cela ne marche pas, il me met une crois rouge est me dit que le tag n’est pas autorisé.

  Je teste du coup le code html que l’on me donne, mais là aussi pleins de messages d’erreur. Il faut peut-être modifier quelque chose pour que cela soit compatible ?

  Voici le code html :

  
  

  https://maps.google.com/maps/api/js?v=3

  function initialize() {
  var isMobile = (navigator.userAgent.toLowerCase().indexOf(‘android’) > -1) ||
  (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
  if (isMobile) {
  var viewport = document.querySelector(« meta[name=viewport] »);
  viewport.setAttribute(‘content’, ‘initial-scale=1.0, user-scalable=no’);
  }
  var mapDiv = document.getElementById(‘googft-mapCanvas’);
  mapDiv.style.width = isMobile ? ‘100%’ : ‘500px’;
  mapDiv.style.height = isMobile ? ‘100%’ : ‘300px’;
  var map = new google.maps.Map(mapDiv, {
  center: new google.maps.LatLng(42.658879152439695, 1.452945899565293),
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById(‘googft-legend-open’));
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById(‘googft-legend’));

  layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
  select: « col1 »,
  from: « 144UQEHJDPzeKMF7GXDJy3ynD2KzxquHPVi3clRYa »,
  where: «  »
  },
  options: {
  styleId: 2,
  templateId: 2
  }
  });

  if (isMobile) {
  var legend = document.getElementById(‘googft-legend’);
  var legendOpenButton = document.getElementById(‘googft-legend-open’);
  var legendCloseButton = document.getElementById(‘googft-legend-close’);
  legend.style.display = ‘none’;
  legendOpenButton.style.display = ‘block’;
  legendCloseButton.style.display = ‘block’;
  legendOpenButton.onclick = function() {
  legend.style.display = ‘block’;
  legendOpenButton.style.display = ‘none’;
  }
  legendCloseButton.onclick = function() {
  legend.style.display = ‘none’;
  legendOpenButton.style.display = ‘block’;
  }
  }
  }

  google.maps.event.addDomListener(window, ‘load’, initialize);

  </head>

  <body>

  </body>
  </html>

• 

  airodyssey · Modérateur · août 18, 2018 at 11:47

  • Copier le lien

  Le code que vous avez inséré contient du JavaScript. Malheureusement, il n’est pas utilisable sur WordPress.com non plus.