Kartes ir būtisks jebkuras uzņēmējdarbības vietnes aspekts. Pat ja jūs pilnībā darbojaties internetā, klientiem joprojām patīk zināt, kas jūs esat un kur dzīvojat. Tagad daudzām vietnēm Google Maps ir noklusējuma iestatījums, jo tās ir visvieglāk lietojamās, šķietami visprecīzākās un bez maksas. Šīs apmācības beigās jūs precīzi zināt, kā savā vietnē iegult adaptīvu Google karti.
Noklusējuma Google Maps ne vienmēr reaģē, tāpēc to mērogs var neatbilst dažādiem ekrāna izmēriem. Atkarībā no tā, vai izmantojat WordPress spraudni vai pats to iegultat, izmantojot kodu, iespējams, būs jāpievieno pāris CSS rindas, lai karte būtu atsaucīga.
Reaģējošs tīmekļa dizains
Atsaucība šeit ir galvenais termins. Tajā aprakstīts tīmekļa dizains, kurā tiek ņemta vērā lietotāja pieredze un ierīce, lai nodrošinātu, ka tā ir vienāda neatkarīgi no tā, kādu ierīci izmantojat, lai piekļūtu vietnei. Piemēram, reaģējošai vietnei ir jāsniedz tādas pašas kvalitātes pieredze neatkarīgi no tā, vai to apmeklējat uz darbvirsmas, planšetdatora vai viedtālruņa.
Lai to izdarītu, vietnei ir jāpielāgojas dažādām izšķirtspējām, ekrāna izmēriem un pieskārienam.
Atsaucīgas Google kartes ievietošana vietnē
Ir trīs veidi, kā es zinu, kā iegult Google Maps vietnē. Ja izmantojat WordPress motīvu, iespējams, tajā ir iebūvēta funkcija. Varat arī izmantot spraudni vai arī iegult kodu tieši no Google jebkurā vietnē. Pirmā un otrā opcija ir lieliska WordPress lietotājiem, arī citas CMS izmanto spraudņus, tāpēc jūs tur esat iekļauts. Pēdējam variantam, izmantojot kodu, vajadzētu darboties lielākajā daļā vietņu neatkarīgi no tā, kā tās tiek veidotas.
Izmantojiet WordPress motīvu, lai iegultu atsaucīgu Google karti
Dažām WordPress tēmām būs īpaša funkcija Google Maps. Tā kā kartes ir tik svarīgas mūsdienu vietnēm, daži dizaineru projekti tos ir ieviesuši tieši savos dizainos. Ja jūsu motīvam ir kartes funkcija, jums, iespējams, būs nepieciešama Google Maps API, lai tā darbotos. Jūs pievienojat API tēmas opcijās, un tā tieši sarunāsies ar Google, lai izveidotu karti katrā apmeklējumā.
- Apmeklējiet šo lapu Google vietnē, lai sāktu API procesu.
- Atlasiet zilo pogu Start Started.
- Atlasiet trīs līniju izvēlnes ikonu jaunā ekrāna augšējā kreisajā stūrī.
- Atlasiet API un pakalpojumi un pēc tam akreditācijas dati.
- Atlasiet Izveidot akreditācijas datus un pēc tam API atslēgu.
- Atlasiet Ierobežot atslēgu un atlasiet HTTP novirzītājus.
- Atlasiet Saglabāt.
- Nokopējiet API atslēgu un ielīmējiet to dizaina iespēju lapā, kurai tā nepieciešama.
Kad esat ieguvis API atslēgu, varat ievietot Google Map savā vietnē, izmantojot motīvu dizaina rīkus. Kamēr tēma ir atsaucīga, arī kartei vajadzētu būt.
Izmantojiet spraudni, lai iegultu atsaucīgu Google Map
WordPress izmanto spraudņus, Joomla izmanto paplašinājumus, Drupal izmanto moduļus vai spraudņus un citas CMS izmanto līdzīgas nosaukšanas konvencijas. Jebkurā gadījumā spraudņi attiecas uz modulāriem elementiem, kurus varat piestiprināt savam CMS, lai pievienotu funkcijas. Viena noderīga funkcija ir Google Map. Ja jūsu vietnes tēmā nav karšu elementa un jūs nevēlaties to darīt pats, nākamais labākais ir spraudnis.
- Vietnē WordPress dodieties uz sadaļu Spraudņi un Pievienot jaunu.
- Meklējiet Google Maps un atlasiet spraudni, kas jums patīk.
- Iespējojiet to spraudņu sadaļā un dodieties uz tā iestatījumiem.
- Pievienojiet iepriekš izveidoto Google Maps API saskarni, kur norādīts, un saglabājiet.
- Ievietojiet spraudni visur, kur vēlaties parādīt karti.
Citas CMS nedaudz atšķiras pēc nosaukumiem un izvēlnes pozīcijām, taču princips ir gandrīz vienāds. Lielākajai daļai, ja ne visiem, kartes spraudņiem būs nepieciešama Google Maps API darbība.
Izmantojiet kodu, lai iegultu atsaucīgu Google karti
Ja neizmantojat WordPress vai citu CMS, jūs joprojām varat iegult adaptīvu Google Map. Jums moduļa vietā ir jāizmanto tikai kods. Tas prasa nedaudz vairāk darba, bet piegādās tās pašas atsaucīgās kartes.
- Apmeklējiet Google Maps un pārvietojieties, līdz karte, kuru vēlaties parādīt, aizpilda ekrānu.
- Atlasiet zilo saiti Koplietot un nokopējiet kodu no iegultās kartes.
- Pievienojiet savu īpašo iegulšanas kodu zemāk esošajam kodam starp un.
- Pievienojiet kodu savas tīmekļa lapas HTML kodā, kur vēlaties redzēt karti.
- Saglabājiet izmaiņas.
Kods:
Šis nav mans kods, es atradu to tiešsaistē, bet pārbaudīju to savā vietnē. Tas darbojas kā šarms, un tam vajadzētu darboties neatkarīgi no tā, vai izmantojat CMS, HTML, Hugo vai vienu no daudzajām citām vietņu valodām vai lapu rīkiem.
