Come incorporare Google Maps sul sito Web: 4 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

Votami nella sfida di Maps!

Di recente, ho creato un sito Web che utilizza Google Maps. Incorporare Google Maps nel mio sito web è stato abbastanza facile e non così difficile da fare. In questo Instructables, ti mostrerò quanto sia facile incorporare Google Maps nel tuo sito web.

Ad essere onesto con te, ho appena incorporato Google Maps nel mio sito web solo per divertimento. Non ci sono molte cose da fare durante la quarantena, quindi perché non creare un sito Web che utilizza Google Maps e mostrare alle persone i passaggi che ho eseguito durante la creazione di questo sito Web.

Ora devo dire che devi sapere un paio di cose su HTML e CSS per incorporare Google Maps nel tuo sito web. Se non sai nulla di HTML o CSS, prova ad andare su

Nota: non sono affiliato con W3Schools in nessuna forma o forma. È solo un sito Web che ho trovato utile per l'apprendimento di HTML e CSS.

Forniture

• Editor di testo (verrà utilizzato per personalizzare il tuo sito Web e fornire il contenuto sul tuo sito Web).
• Google Maps (cosa verrebbe incorporato nel tuo sito web).
• Comprensione di base di HTML e CSS (questi sono i seguenti linguaggi di programmazione che verrebbero utilizzati durante la personalizzazione del tuo sito Web e la fornitura di contenuti sul tuo sito Web).

Passaggio 1: fornisci contenuti sul tuo sito web

Vai al tuo software di editor di testo sul tuo computer. Ad esempio, dato che ho Windows, dovrei andare su Blocco note. Dopo essere andato su Blocco note, digitare quanto segue:

Google Maps

Google Maps

Dopo aver digitato quanto segue nel Blocco note, vai su Google Maps dove in seguito otterrai il codice da utilizzare per incorporare Google Maps nel tuo sito web.

Ecco il link per andare su Google Maps:

Passaggio 2: incorpora Google Maps sul tuo sito web

Una volta che sei su Google Maps, fai clic sul pulsante "Menu" e quindi cerca "Condividi o incorpora mappa". Quando vedi "Condividi o incorpora mappa", fai clic su di essa. Dopo aver fatto clic su di esso, dovresti vedere "Invia un collegamento" e "Incorpora una mappa". Ora fai clic su "Incorpora una mappa", dopo aver fatto clic su "Incorpora una mappa" dovresti ora vedere una freccia in basso a sinistra di una casella di testo che verrebbe utilizzata per scegliere quanto grande o piccola vuoi che sia la mappa. Copia il testo nella casella. E incolla il testo nell'HTML del tuo sito web.

Passaggio 3: personalizza il tuo sito web

Torna al software dell'editor di testo sul tuo computer e digita quanto segue:

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

Google Maps

Il tag di stile viene utilizzato per personalizzare il tuo sito web. Ora, ti consiglierò che questo passaggio utilizza i CSS. Puoi digitare quanto segue in modo che il tuo assomigli esattamente al mio sito web.

Al termine, salva il file come "Google Maps.html". Non dimenticare la parte html perché se non includi questa parte, non puoi creare un sito web.

Passaggio 4: guarda il tuo prodotto finale

Una volta che hai finito di seguire tutti i passaggi di questo Instructables, dai un'occhiata al tuo prodotto finale. Se sei soddisfatto del tuo prodotto finale, è fantastico. Ma, se non sei soddisfatto del tuo prodotto finale, torna nel tuo Blocco note e prova a riparare il tuo prodotto finale in modo che la prossima volta, quando darai una buona occhiata al tuo prodotto finale, sarai soddisfatto di ciò che hai creato con le tue mani.

Se desideri visualizzare il mio codice sorgente, puoi trovarlo in fondo a questo Instructables. Grazie per aver visualizzato i miei Instructables e buona codifica!

Come promemoria, vota per me nella sfida di Maps!