Comment intégrer Google Maps sur un site Web : 4 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:06

Votez pour moi dans le défi des cartes !

Récemment, j'ai créé un site Web qui utilise Google Maps. L'intégration de Google Maps sur mon site Web était assez facile et pas si difficile à faire. Dans ce Instructables, je vais vous montrer à quel point il est facile d'intégrer Google Maps sur votre site Web.

Pour être honnête avec vous, je viens d'intégrer Google Maps sur mon site Web juste pour le plaisir. Il n'y a pas grand-chose à faire pendant la quarantaine, alors pourquoi ne pas créer un site Web qui utilise Google Maps, puis montrer aux gens les étapes que j'ai suivies lors de la création de ce site Web.

Maintenant, je dois dire que vous devez savoir une chose ou deux sur HTML et CSS afin d'intégrer Google Maps sur votre site Web. Si vous ne connaissez rien au HTML ou au CSS, essayez d'aller sur

Remarque: je ne suis affilié à W3Schools sous aucune forme. C'est juste un site Web que j'ai trouvé utile pour apprendre le HTML et le CSS.

Fournitures

• Éditeur de texte (sera utilisé pour personnaliser votre site Web et fournir le contenu sur votre site Web).
• Google Maps (ce qui serait intégré à votre site Web).
• Compréhension de base de HTML et CSS (ce sont les langages de programmation suivants qui seraient utilisés lors de la personnalisation de votre site Web et de la fourniture de contenu sur votre site Web).

Étape 1: Fournissez du contenu sur votre site Web

Accédez à votre logiciel d'édition de texte sur votre ordinateur. Par exemple, puisque j'ai un Windows, je devrais aller dans le Bloc-notes. Après avoir accédé au Bloc-notes, saisissez ce qui suit:

Google Maps

Google Maps

Une fois que vous avez terminé de taper ce qui suit dans le Bloc-notes, accédez à Google Maps où vous obtiendrez plus tard le code que vous utiliserez pour intégrer Google Maps sur votre site Web.

Voici le lien pour vous rendre sur Google Maps:

Étape 2: Intégrez Google Maps sur votre site Web

Une fois sur Google Maps, cliquez sur le bouton "Menu" puis recherchez "Partager ou intégrer la carte". Une fois que vous voyez "Partager ou intégrer la carte", cliquez dessus. Une fois que vous avez cliqué dessus, vous devriez voir "Envoyer un lien" et "Intégrer une carte". Maintenant, cliquez sur "Intégrer une carte", une fois que vous avez cliqué sur "Intégrer une carte", vous devriez maintenant voir une flèche vers le bas à gauche d'une zone de texte qui serait utilisée pour choisir la taille ou la taille de la carte. Copiez le texte dans la case. Et collez le texte dans le code HTML de votre site Web.

Étape 3: Personnalisez votre site Web

Retournez à votre logiciel d'édition de texte sur votre ordinateur et tapez ce qui suit:

Corps de Google Maps{background-color:rgb(129, 207, 224, 1);}

Google Maps

La balise de style est utilisée afin de personnaliser votre site Web. Maintenant, je vais vous conseiller que cette étape utilise CSS. Vous pouvez taper ce qui suit pour que le vôtre ressemble exactement à mon site Web.

Une fois que vous avez terminé, enregistrez votre fichier sous le nom "Google Maps.html". N'oubliez pas la partie html car si vous n'incluez pas cette partie, vous ne pourrez pas créer de site web.

Étape 4: Regardez votre produit final

Une fois que vous avez terminé de suivre toutes les étapes de ce Instructables, jetez un bon coup d'œil à votre produit final. Si vous êtes satisfait de votre produit final, c'est parfait. Mais, si vous n'êtes pas satisfait de votre produit final, retournez dans votre Bloc-notes et essayez de réparer votre produit final afin que la prochaine fois que vous regardez bien votre produit final, vous serez satisfait de ce que vous avez créé avec tes mains.

Si vous souhaitez voir mon code source, il se trouve au bas de ce Instructables. Merci d’avoir visionné mes Instructables et bon codage !

Pour rappel, veuillez voter pour moi dans le défi des cartes !