Share
La toute nouvelle version de Google Maps a été mise à la disposition du public en juillet, mais elle donne toujours un aperçu de ce que sera le produit final. Il manque donc quelques fonctionnalités connues..
Par exemple, avez-vous essayé d'intégrer une nouvelle carte Google dans une page Web? Le vieux bouton "lien" fiable est introuvable! Certains suggèrent de revenir à l'ancienne version de Google Maps, d'intégrer un iframe de la manière d'origine, puis de revenir à l'aperçu plus récent de Google Maps une fois que vous avez terminé. Mais il existe un autre moyen, qui vous aidera à tirer parti de la plus récente et plus jolie Google Maps, comme ceci:
Ce n'est pas une image…Maps Engine Lite (Beta) est un outil qui vous permet de concevoir et d'enregistrer vos propres cartes personnalisées. Pour l'utiliser, vous devez posséder un compte Google et être connecté..
Vous pouvez ensuite publier et partager vos cartes. Commençons par cliquer sur "Nouvelle carte":
Saisissez l'adresse du siège social d'Envato dans le champ de recherche à titre d'exemple:
Après avoir localisé le bureau et ajouté un marqueur, nous pouvons maintenant donner un nom à notre carte en cliquant sur "Carte sans titre":
Nous pouvons également cliquer sur "Couche sans titre" pour lui donner un nom, après quoi nous pouvons ajouter toutes sortes d'emplacements, d'itinéraires et de zones à notre carte. Nous pouvons également importer via des téléchargements de fichiers, mais pour le moment, nous allons simplement nous concentrer sur notre marqueur unique. Assurez-vous que vous avez ajouté le lieu de la recherche sur votre carte, puis concentrez-vous sur les caractéristiques des marqueurs..
À présent, Envato HQ est répertorié sous le calque "Emplacements commerciaux". Vous pouvez modifier sa couleur, son étiquette et même son icône. Google a fourni de nombreuses possibilités de personnalisation ici, alors amusez-vous à explorer! J'ai donné au QG une icône de bureau jaune.
Une autre fonctionnalité intéressante des nouvelles cartes de Google est ses différents thèmes; Cliquez sur "Carte de base" et assommez-vous. Je suis allé pour "l'eau blanche":
Après avoir terminé notre carte, nous devons maintenant modifier les paramètres de partage, alors cliquez sur le bouton "Partager" en haut à droite.
Cela ouvrira une boîte de dialogue dans laquelle vous pourrez choisir de changer la visibilité de votre carte de "Privée" à "Publique". Cela est nécessaire pour intégrer votre carte dans une page Web..
Cela fait, cliquez sur l'icône "dossier" et sélectionnez "Intégrer sur mon site"..
Vous recevrez un extrait HTML, comme ceci:
pour incorporer un iframe dans une page Web.
Une dernière chose, votre carte ne répond pas exactement dans son état actuel. Enveloppons-le dans un élément fluide (un peu comme ceux utilisés pour les intégrations vidéo fluides) afin que nous puissions l'inclure dans une présentation réactive..
Premièrement, nous encapsulons un élément supplémentaire autour de notre iframe:
Ensuite, nous dimensionnons l'encapsuleur à l'aide de padding (une propriété fluid height ne fonctionnera pas) et y placerons l'iframe:
.enveloppe de fluide position: relative; rembourrage en bas: 56,25%; / * 16: 9 * / hauteur: 0; .fluid-wrapper iframe position: absolute; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%; bordure: aucune;
Ce rembourrage de 56,25% donne à notre conteneur un rapport 16: 9, ce qui vaut la peine d'être pris en compte pour la vidéo, mais vous pouvez créer un rectangle Google Map dans les proportions de votre choix..
C'est tout! C’est simple, mais une de ces tâches utiles, rendue temporairement délicate pendant que Google effectue la transition vers la nouvelle version de Google Maps..
ps) Avez-vous assisté à la récente randonnée de Google Maps Street View dans les îles Galápagos? Ça vaut le détour…
Accentsconagua