Paano Mag-embed ng Google Maps sa Website: 4 na Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:11

Bumoto para sa akin sa Maps Challenge!

Kamakailan, lumikha ako ng isang website na gumagamit ng Google Maps. Ang pag-embed ng Google Maps sa aking website ay medyo madali at hindi ganoon kahirap gawin. Sa Mga Tagubilin na ito, ipapakita ko sa iyo kung gaano kadali mag-embed ng Google Maps sa iyong website.

Upang maging tapat sa iyo, na-embed ko lang ang Google Maps sa aking website para lang sa kasiyahan. Walang gaanong bagay na dapat gawin habang nasa kuwarentenas, kaya't bakit hindi gumawa ng isang website na gumagamit ng Google Maps pagkatapos ay ipakita sa mga tao ang mga hakbang na kinuha ko habang nililikha ang website na ito.

Ngayon dapat kong sabihin, dapat mong malaman ang isang bagay o dalawa tungkol sa HTML at CSS upang mai-embed ang Google Maps sa iyong website. Kung wala kang alam tungkol sa HTML o CSS, subukang pumunta sa

Tandaan: Hindi ako kaanib sa W3Schools sa anumang hugis o anyo. Isa lamang itong website na nalaman kong kapaki-pakinabang kapag natututo ng HTML at CSS.

Mga gamit

• Text Editor (gagamitin upang ipasadya ang iyong website at ibigay ang nilalaman sa iyong website).
• Google Maps (kung ano ang mai-embed sa iyong website).
• Pangunahing Pag-unawa sa HTML at CSS (ito ang mga sumusunod na wika ng pag-program na magagamit kapag pinapasadya ang iyong website at nagbibigay ng nilalaman sa iyong website).

Hakbang 1: Magbigay ng Nilalaman sa Iyong Website

Pumunta sa iyong software ng text editor sa iyong computer. Halimbawa, dahil mayroon akong isang Windows, dapat akong pumunta sa Notepad. Pagkatapos mong pumunta sa uri ng Notepad sa mga sumusunod:

mapa ng Google

mapa ng Google

Matapos mong mag-type sa sumusunod sa Notepad, pumunta sa Google Maps kung saan makukuha mo sa paglaon ang code para magamit mo upang mai-embed ang Google Maps sa iyong website.

Narito ang link para sa iyo upang pumunta sa Google Maps:

Hakbang 2: I-embed ang Google Maps Sa Iyong Website

Kapag nasa Google Maps ka na, mag-click sa pindutang "Menu" at pagkatapos ay hanapin ang "Ibahagi o i-embed ang mapa". Kapag nakita mo ang "Ibahagi o i-embed ang mapa", mag-click dito. Kapag na-click mo na iyon, dapat mong makita ang "Magpadala ng isang link" at "I-embed ang isang mapa". Ngayon mag-click sa "I-embed ang isang mapa", sa sandaling na-click mo ang "I-embed ang isang mapa" dapat mo na ngayong makita ang isang pababang arrow sa kaliwa ng isang text box na magagamit upang piliin kung gaano kalaki o maliit ang nais mong mapa. Kopyahin ang teksto sa kahon. At i-paste ang teksto sa HTML ng iyong website.

Hakbang 3: Ipasadya ang Iyong Website

Bumalik sa iyong software ng text editor sa iyong computer at i-type ang mga sumusunod:

Ang katawan ng Google Maps ay {background-color: rgb (129, 207, 224, 1);}

mapa ng Google

Ginamit ang style tag upang mai-customize ang iyong website. Ngayon, payuhan ko kayo na ang hakbang na ito ay gumagamit ng CSS. Maaari kang mag-type sa mga sumusunod upang ang iyong hitsura eksaktong hitsura ng aking website.

Kapag tapos ka na, i-save ang iyong file bilang "Google Maps.html". Huwag kalimutan ang bahagi ng html sapagkat kung hindi mo isasama ang bahaging ito, hindi ka maaaring gumawa ng isang website.

Hakbang 4: Tingnan ang Iyong Huling Produkto

Kapag natapos mo na ang pagsunod sa lahat ng mga hakbang sa Mga Instructionable na ito, tingnan ang iyong huling produkto. Kung masaya ka sa iyong huling produkto, magaling iyan. Ngunit, kung hindi ka nasisiyahan sa iyong pangwakas na produkto, bumalik sa iyong Notepad at subukang ayusin ang iyong pangwakas na produkto upang sa susunod na tingnan mo ang iyong huling produkto, magiging masaya ka sa iyong nilikha iyong mga kamay.

Kung nais mong tingnan ang aking source code, mahahanap ito sa ilalim ng Mga Instructionable na ito. Salamat sa pagtingin sa aking Mga Instructable at masaya na pag-coding!

Bilang paalala, mangyaring bumoto para sa akin sa Maps Challenge!