Intégrer une carte, un lieu , un parcours, une image Street View dans un article (ou gadget)

 Et si on ajoutait des cartes, plans, itinéraires, vue Streetview ...  dans le blog ? et  même des cartes personnalisées réalisées avec Google Earth

Google Maps permet de partager une carte ou un itinéraire avec d'autres utilisateurs soit avec un simple lien sur le texte du blog, soit en intégrant la carte dans l'article du blog

Vous pouvez partager un lieu, un itinéraire ou une carte ou une image Steet view . Voici ce que vous pouvez partager :

• Un lieu, un établissement ou une adresse
• Une recherche d'itinéraire
• Une image Street View

Voici ce que vous ne pouvez pas partager :

• Une carte avec vos adresses enregistrées (elles sont privées)
• Une carte comportant une mesure de distance
• Une capture d'écran ou image de la carte

Google Earth permet d'aller plus loin, en affichant des cartes "renseignées"  avec des repères détaillés ( affichage de texte, photos sur des lieux précis), des parcours et même des superpositions de calques....


Plan de l'article
1-Comprendre : Principe de base
2- Partager un simple lien d'une carte ou lieu ou itinéraire ou image Street View
3-Intégrer une carte ou lieu ou itinéraire ou image Street View
4- Créer une carte personnalisée (repères, parcours, lieux...) avec Google Earth pro et l'intégrer dans le blog

1-Comprendre : Principe de base

1- Démarrer Google maps dans votre navigateur
2- Lancer une recherche pour afficher la carte souhaitée

3-Cliquer sur le Menu "sandwich" en haut à gauche
le Menu s'affiche

-sélectionner : "Partager ou Intégrer la carte"

-s'affiche:
"Envoyer un lien" =>  avec cette adresse URL, vous pouvez faire un lien dans votre blog (ou envoyer ce lien à une personne...)
OU 

- "Intégrer une carte" => la carte va s'afficher dans l'article du Blog

2- Partager un simple LIEN d'une carte ou lieu ou itinéraire ou image Street View

METHODE

1. Ouvrez Google Maps sur votre ordinateur.
2. Accédez à l'itinéraire, à la carte ou à l'image Street View que vous souhaitez partager.
3. En haut à gauche, cliquez sur Menu .
4. Sélectionnez l'option Partager ou intégrer la carte. Si elle ne s'affiche pas, cliquez sur Lien vers cette carte.
   • 
     
     
5. Copiez le lien et collez-le à l'endroit où vous souhaitez partager la carte.

DEMO ( cliquer sur les liens)

Notre activité de Blog se déroule  à l'UIA de Bayeux, 14 rue  Bellefontaine

voir la photo de Google Street

L'itinéraire, à pied,  depuis la place Saint Patrice

3-Intégrer une carte ou lieu ou itinéraire ou image Street View

Maintenant, vous intégrer la carte dans l'article de votre blog : elle va automatiquement s'afficher

METHODE

1. Ouvrez Google Maps sur votre ordinateur.
2. Accédez à l'itinéraire, à la carte ou à l'image Street View que vous souhaitez partager.
3. En haut à gauche, cliquez sur Menu .
4. Sélectionnez l'option Partager ou intégrer la carte. Si elle ne s'affiche pas, cliquez sur Lien vers cette carte. 
5. Copiez le code html 
6. Dans l'article de votre Blog , passez en mode HTML pour coller ( au bon endroit) le code.
   ASTUCE : pour repérer le bon endroit de l'intégration sur un article déjà rempli de texte
   -En mode texte, afficher, au bon endroit une longue série de 00000000000000000000000000000000 
   -En mode html, repérez vos 0000000000000000000  et au milieu collez votre code
   -En mode texte, après vérification d'un bon affichage, supprimez vos 000000000000000000000000

DEMO

CARTE
   

STREET VIEW 
 

ITINERAIRE  

Tous ces codes s peuvent s'intégrer

• dans un article classique (il faudra travailler en mode HTML...) par ex pour la carte
• dans un widget " HTML Javascript" pour les autres  petits widgets..

4- Créer une carte personnalisée  (repères, parcours, lieux...) avec Google EarthPro et l'intégrer dans votre Blog


=>Possibilité d'intégrer un fichier kmz

1-Google Earth existe désormais en plusieurs versions :
-version Web, allégée, qui s'affiche dans votre navigateur
-  en logiciel gratuit de Google  "Google Earth  Pro" => nous le conseillons : si nécessaire le télécharger et l'installer

2-Préparer votre carte en incluant repères, parcours ... selon vos souhaits
 VOIR NOTRE BLOG consacré à Google EARTH pour créer des itinéraires, repères détaillés et autres

 2-Enregistrer les résultat sous forme d'un fichier kmz

3 Importez les informations dans "My Map"

1. Sur votre ordinateur, connectez-vous à My Maps.
2. Ouvrez ou créez une carte.
3. Dans la légende de la carte, cliquez sur Ajouter un calque.
4. Donnez un nom au nouveau calque.
5. Sous le nouveau calque, cliquez sur Importer.
6. Choisissez ou importez le fichier kmz (ou les photos) contenant vos informations, puis cliquez sur Sélectionner.
7. Les éléments géographiques sont automatiquement ajoutés.

4-Partagez

Attention à bien indiquer " A tous les utilisateurs ayant le lien"

5-Intégrez via le Menu "Hamburger"

Récupérer le code  ( iframe)

6-Copier ce code,en mode HTML, dans votre article.
Si nécessaire ajuster la taille

Résultat final





5-AUTRES POSSIBILITÉS d'INTEGRATION
=> attention le code doit être compatible avec le https ! 
=> voici des exemples,  à vous de rechercher d'autres possibilités (toujours tester ! )
=> Voir  notre article explicatif

MÉTÉO

1-Se rendre sur un site qui propose un code  à intégrer comme  https://hotelmix.fr/widgets/weather

2- récupérer le code et l'intégrer dans votre article en le collant en mode HTML

RÉSULTAT

+16

°

C

H: +16°

L: +16°

Bayeux

Jeudi, 26 Septembre

Prévisions sur 7 jours

Ven.	Sam.	Dim.	Lun.	Mar.	Mer.
+17°	+17°	+18°	+19°	+17°	+13°
+16°	+15°	+16°	+15°	+13°	+12°

HEURE & DATE
1-Se rendre sur un site qui propose un code  à intégrer comme  https://time.is/fr/widgets

2- récupérer le code et l'intégrer dans votre article en le collant en mode HTML

RÉSULTAT

Heure en France :





AUTRE exemple d'horloge dynamique:
se rendre sur https://www.zeitverschiebung.net/fr/clock-widget

RÉSULTAT

Heure actuelle
Paris, France

INSERTION DE CODE
en mode html :  insérerce code

<div id='clock'>
<script type='text/javascript'>var d = new Date(); document.write(d.getHours()+':'+d.getMinutes());</script>
</div>

 qui donne ceci :