Google Maps est l'un des meilleurs utilitaires jamais mis sur le Web. Il est devenu le moyen standard pour obtenir des itinéraires en ligne, visualiser des images satellite et de terrain et effectuer toute autre tâche liée à la carte.
Vous souhaitez intégrer une carte Google Map à votre page Web pour différentes raisons, que ce soit à des fins fonctionnelles, telles que guider les utilisateurs vers votre emplacement physique ou à des fins esthétiques, telles que l'utilisation de map pour un fond graphique. Aujourd'hui, nous allons examiner deux façons de procéder: le moyen rapide et simple et la route d'API puissante et flexible.
Intégrer une carte Google
La première chose que nous allons apprendre à faire est l’intégration simple et directe d’une carte Google. La fonctionnalité ici est assez limitée mais c'est super facile.
La première chose à faire est tout simplement d’utiliser Google Maps comme si vous recherchiez un itinéraire. Tapez simplement l'adresse où vous voulez que la carte commence.
Maintenant, cliquez sur la petite icône de lien dans le coin supérieur droit de l'écran. Cela devrait faire apparaître une petite fenêtre contenant un lien pur et un extrait HTML, copiez la seconde dans votre presse-papiers et collez-la dans un document HTML.
Le HTML
C'est tout ce qu'on peut en dire! Cela devrait vous donner une carte en direct sur votre page Web. Cependant, vous ne voudrez probablement jamais coller le code et le faire, mais le styler à la place pour répondre à vos besoins.
Pour ce faire, examinons le code brut qui en résulte:
Maintenant, cela peut ressembler à un grand désordre, mais il est assez facile à trier. Les liens sont vraiment le résultat de tout ce code désagréable, alors jetons-les simplement pour les besoins de l'exemple. Maintenant, le code semble beaucoup plus facile à gérer.
Nous pouvons voir quelques contrôles de style en ligne assez bas ici. Pour commencer, essayons de redimensionner la carte à 600 pixels de large. Nous pouvons facilement envelopper cela dans un div et le centrer. J'ai également changé la couleur du lien vers la fin du blanc.
Disons que nous voulions nous amuser un peu plus avec ça. Laissons ce dernier lien complètement et fixons notre largeur de manière à s'étendre sur toute la longueur de la page. Le code pour ceci est gentil et concis.
Aller en plein écran: la voie rapide et sale
L’astuce ci-dessus est parfaite pour intégrer une carte en direct dans votre page de contact, mais supposons que vous vouliez faire de la carte davantage une fonction de conception que un utilitaire. Il est assez facile d'utiliser cette même technique et d'étendre la carte sur tout l'écran.
Le HTML
Pour commencer, créez deux divs, un qui contiendra toutes les illustrations, le texte, etc. et un autre pour la carte. J'ai ajouté du texte de base pour la partie superposition et collé ma carte dans la deuxième division. Notez que j'ai supprimé la partie lien à la fin du lien incorporé ainsi que les styles de taille situés au début du lien.
C'est vraiment tout le balisage dont nous avons besoin. Passons à notre CSS pour que tout soit beau et que tout soit parfait.
Le CSS
La première chose à faire est de cibler l’iframe dans notre div de carte et de définir sa hauteur et sa largeur à 100%. Cela garantira que notre carte s'étend sur toute la taille de la fenêtre du navigateur.
Mise à jour: Cela fonctionne dans Safari, mais il est devenu plus difficile que je ne le pensais. Consultez cet article pour plus de détails.
Ensuite, nous appelons la superposition. La clé ici est de définir le position propriété à absolu, ce qui le tirera du flux normal du document et le placera au-dessus de la carte. À partir de là, nous pouvons styler et déplacer le tout.
Je voulais une barre noire légèrement transparente alors j'ai utilisé rgba réglé sur une opacité de 90%. A partir de là, j'ai ajouté une marge en haut et défini les polices pour les deux balises de texte à l'aide de raccourcis CSS.
Faire preuve de créativité
Vous pouvez traiter la carte comme n'importe quel autre élément de la page. Essayez donc de modifier sa forme, d'appliquer des effets et tout ce que vous pouvez créer!
Les API Google Maps
Nous avons à peine effleuré la surface de ce que vous pouvez faire avec Google Maps sur votre site. En fait, Google propose toute une famille d’API visant à vous aider à structurer, à styler et à intégrer des versions hautement personnalisées de leurs cartes.
La méthode iframe ci-dessus est simple et amusante, mais le meilleur moyen d'incorporer des cartes dans votre site est probablement l'API JavaScript. En utilisant ceci, tout ce que vous avez à faire pour incorporer une carte est de créer une div avec un identifiant spécifique comme ceci:
Ensuite, vous entrez dans votre JavaScript, appelez une fonction, configurez des options et les stockez dans une variable, puis créez la carte en utilisant l'ID du code HTML ci-dessus.
L'API vous fournit une tonne d'options pour les paramètres tels que le niveau de zoom et les commandes visibles. Vous pouvez même personnaliser les petits marqueurs de carte avec vos propres images.
Tutoriels API
Si vous souhaitez vous familiariser avec les API Google Maps, voici quelques liens que vous voudrez certainement consulter.
- Didacticiel officiel de Google JavaScript API
- Wade Hammes: Définition d'une carte Google comme arrière-plan de votre site Web
Cartes statiques
Vous ne voulez pas une carte interactive? Consultez la documentation pour ajouter une carte statique.La plupart des fonctionnalités sont identiques, le résultat est simplement une image immobile plutôt qu'une carte réelle avec laquelle les utilisateurs peuvent jouer.
Conclusion
Pour résumer, si vous souhaitez une carte Google sur votre site sans effort, suivez les étapes ci-dessus pour suivre la route iframe. Votre contrôle sur la carte est limité, mais vous pouvez vous amuser avec la manière dont vous l'intégrez dans la page. Si vous avez besoin de plus de fonctionnalités et de flexibilité, inscrivez-vous pour obtenir une clé d'API gratuite et suivez la route JavaScript.
Laissez un commentaire ci-dessous et montrez-nous les pages que vous avez créées avec Google Maps. Quelles techniques et ressources avez-vous trouvé utiles?