Ang mga mapa ay isang mahalagang aspeto ng anumang website ng negosyo. Kahit na ganap kang nakabatay sa internet, nais pa ring malaman ng mga customer kung sino ka at kung saan ka nakatira. Ang Google Maps ay ngayon ang default para sa maraming mga website dahil ito ang pinakamadaling gamitin, tila ang pinaka tumpak at libre. Sa pagtatapos ng tutorial na ito, malalaman mo nang eksakto kung paano mag-embed ng isang tumutugon na Google Map sa iyong website.
Ang Default na Google Maps ay hindi palaging tumutugon kaya maaaring hindi masukat sa iba't ibang laki ng screen. Depende sa kung gumagamit ka ng isang plugin ng WordPress o pag-embed nito sa iyong sarili gamit ang code, maaaring kailangan mong magdagdag ng isang pares ng mga linya ng CSS upang masagot ang mapa.
Nakikiramay disenyo ng web
Ang tumutugon ay isang pangunahing termino dito. Inilalarawan nito ang disenyo ng web na isinasaalang-alang ang karanasan at aparato ng gumagamit upang matiyak na pareho ito anuman ang aparato na iyong ginagamit upang ma-access ang website. Halimbawa, ang isang website na tumutugon ay dapat magbigay ng parehong kalidad ng karanasan kung bisitahin mo ito sa isang desktop, tablet o smartphone.
Upang gawin ito, ang website ay kailangang umangkop sa iba't ibang mga resolusyon, laki ng screen at hawakan.
Ang pag-embed ng isang tumutugon na Google Map sa isang website
Mayroong tatlong mga paraan na alam kong mai-embed ang Google Maps sa isang website. Kung gumagamit ka ng isang tema ng WordPress, maaaring magkaroon ng tampok na itinayo. Maaari ka ring gumamit ng isang plugin o maaari kang mag-embed ng code nang direkta mula sa Google sa anumang website. Ang una at pangalawang mga pagpipilian ay mahusay para sa mga gumagamit ng WordPress, ang iba pang mga CMS ay gumagamit din ng mga plugin kaya nasasakop ka doon. Ang pangwakas na pagpipilian, ang paggamit ng code ay dapat gumana sa karamihan ng mga website anuman ang itinayo.
Gumamit ng isang tema ng WordPress upang mag-embed ng isang tumutugon sa Google Map
Ang ilang mga tema ng WordPress ay magkakaroon ng isang tampok na partikular para sa Google Maps. Tulad ng mga mapa ay tulad ng isang pangunahing sa mga modernong website, ang ilang mga disenyo ng tema ay ipinatupad ang mga ito nang direkta sa kanilang mga disenyo. Kung ang iyong tema ay may tampok na mapa, malamang na kakailanganin mo ng isang Google Maps API upang magtrabaho ito. Idagdag mo ang API sa mga pagpipilian sa tema at direkta itong makikipag-usap sa Google upang itayo ang mapa sa bawat pagbisita.
- Bisitahin ang pahinang ito sa website ng Google upang simulan ang proseso ng API.
- Piliin ang pindutang asul na Magsimula.
- Piliin ang tatlong linya ng menu ng linya sa kaliwang tuktok ng bagong screen.
- Piliin ang Mga API at Serbisyo at pagkatapos ng Mga Kredensyal.
- Piliin ang Lumikha ng Mga Kredensyal at pagkatapos ng API Key.
- Piliin ang Paghigpitan ang Key at piliin ang Mga Tagapagsalin ng HTTP.
- Piliin ang I-save.
- Kopyahin ang API Key at i-paste ito sa pahina ng mga pagpipilian sa disenyo na nangangailangan nito.
Kapag mayroon kang API Key maaari mong ipatupad ang Google Map sa iyong website gamit ang mga tool sa disenyo ng tema. Hangga't ang tema ay tumutugon, ang mapa ay dapat na masyadong.
Gumamit ng isang plugin upang mag-embed ng isang tumutugon sa Google Map
Gumagamit ang WordPress ng mga plugin, gumagamit si Joomla ng mga Extension, ang Drupal ay gumagamit ng mga module o plugin at iba pang CMS ay gumagamit ng magkatulad na mga kombensiyon sa pagbibigay ng pangalan. Alinmang paraan, ang mga plugin ay tumutukoy sa mga modular na elemento na maaari mong i-bolt sa iyong core CMS upang magdagdag ng mga tampok. Ang isang kapaki-pakinabang na tampok ay isang Google Map. Kung ang tema ng iyong website ay hindi kasama ang isang elemento ng mapa at hindi mo nais na gawin ang code mismo, isang plugin ang susunod na pinakamahusay na bagay.
- Sa WordPress, mag-navigate sa Plugins at Magdagdag ng Bago.
- Maghanap para sa Google Maps at pumili ng isang plugin na gusto mo sa hitsura.
- Paganahin ito sa loob ng Mga Plugin at pumunta sa Mga Setting nito.
- Idagdag ang Google Maps API na nilikha mo sa itaas kung saan ipinahiwatig at I-save.
- Ipatupad ang plugin kung saan mo nais na lumitaw ang mapa.
Ang iba pang mga CMS ay naiiba nang bahagya sa kanilang mga posisyon sa pangalan at menu ngunit ang prinsipyo ay magkapareho. Karamihan, kung hindi lahat, ang mga plugin ng mapa ay mangangailangan ng Google Maps API upang gumana.
Gumamit ng code upang mag-embed ng isang tumutugon na Google Map
Kung hindi ka gumagamit ng WordPress o iba pang CMS, maaari ka pa ring mag-embed ng isang tumutugon na Google Map. Kailangan mo lamang gumamit ng code sa halip na isang module. Tumatagal ng kaunti pang trabaho ngunit ihahatid ang parehong mga tumutugon na mga mapa.
- Bisitahin ang Google Maps at mag-navigate hanggang sa mapa na nais mong ipakita ang pumupuno sa screen.
- Piliin ang bughaw na link na Ibahagi at kopyahin ang code mula sa I-embed ang Mapa
- Idagdag ang iyong tukoy na naka-embed na code sa code sa ibaba sa pagitan ng at.
- Idagdag ang code sa loob ng HTML ng iyong web page kung saan nais mong makita ang mapa.
- I-save ang iyong mga pagbabago.
Ang code:
Hindi ito ang aking code, natagpuan ko ito online ngunit sinubukan ito sa aking website. Gumagana ito tulad ng isang kagandahan at dapat gumana kung gumagamit ka ng isang CMS, HTML, Hugo o isa sa maraming iba pang mga wika sa website o mga tool sa pahina.
