вордпресс

ВордПресс Водич за Гоогле мапе: Уградите са или без додатка

Тражите начин да уградите садржај ВордПресс Гоогле мапа на своју веб локацију?

Као и многе друге ствари у ВордПресс-у, постоји неколико различитих начина на које можете да уградите Гоогле мапе на своју веб локацију у зависности од врсте садржаја мапе коју желите да укључите.

У овом посту ћемо почети тако што ћемо вам показати како да додате Гоогле мапе у ВордПресс без додатка. Затим ћемо вам препоручити неке додатке могу помоћи вам да уградите Гоогле мапе, као и неке од предности таквог приступа. Такође ћемо уронити у то како правилно користити АПИ за Гоогле мапе, који је сада неопходан.

Коначно, завршићемо са неким разматрањима перформанси за коришћење Гоогле мапа на ВордПресс-у и поделићемо неке савете о томе како да одржавате брзо учитавање ваше ВордПресс локације чак и ако морате да уградите Гоогле мапе.

Можете кликнути испод да бисте прешли директно на одређени одељак или само прочитали целу ствар.

  • АПИ за Гоогле мапе је сада неопходан
  • Како додати Гоогле мапе у ВордПресс без додатка
  • ВордПресс Гоогле Мапс додаци који вам дају већу флексибилност
  • Ефекат перформанси Гоогле мапа и савети за побољшање перформанси

АПИ за Гоогле мапе је сада неопходан

Од 11. јуна 2018. године, ан АПИ кључ је сада неопходан за Гоогле мапе. Ако сте већ применили Гоогле мапе на свом сајту и оне више не раде, ово би могао бити разлог. Или боље речено, недостаје вам АПИ кључ. Добра вест је да би за 99% вас и даље требало да буде бесплатно. Испод су цене АПИ-ја за Гоогле мапе.

Одређивање цена АПИ-ја за Гоогле мапе

Одређивање цена АПИ-ја за Гоогле мапе

Гоогле вам такође даје периодични кредит од 200 УСД на вашем налогу за обрачун сваког месеца како бисте надокнадили трошкове коришћења. Као што видите, осим ако не генеришете хиљаде захтева, коришћење Гоогле мапа на вашој веб локацији не би требало да вас кошта ништа.

Шта се још променило? Ништа, али сада ћете морати да урадите следеће ако желите да користите Гоогле мапе у ВордПресс-у:

  1. Региструјте се за налог конзоле Гоогле Цлоуд Платформ и конфигуришите га.
  2. Додајте своје податке за обрачун, иако вам можда никада неће бити наплаћено.
  3. Додајте АПИ кључ у свој код за уградњу Гоогле мапа или подешавања додатка.

Како добити АПИ кључ за Гоогле мапе

Испод су кораци о томе како да добијете свој АПИ кључ за Гоогле мапе.

Корак КСНУМКС

Идите на конзолу Гоогле Цлоуд Платформ. Ако још увек немате налог, отворите га, бесплатно је.

Корак КСНУМКС

Изаберите или креирајте пројекат.

Корак КСНУМКС

Подесите свој налог за обрачун. Иако ће од вас захтевати да унесете кредитну картицу, никада вам не би требало бити наплаћено, осим ако не пређете високе границе коришћења.

Корак КСНУМКС

Од вас ће бити затражено да изаберете један или више производа. Ово зависи од врсте мапе коју користите. На пример, ако уграђујете мапу на своју ВордПресс локацију без додатка (као што је приказано у корацима у наставку), онда бисте изабрали АПИ за уградњу Гоогле мапа.

АПИ за уградњу Гоогле мапа

АПИ за уградњу Гоогле мапа

Ако користите додатак као што је виџет за Гоогле мапе (као што је приказано у корацима у наставку), онда бисте изабрали статички АПИ за Гоогле мапе.

Ако користите додатак или тему треће стране, они би требало да имају документацију о томе који тип примене Гоогле мапа користе. Не брините, увек можете да додате више типова и промените их касније.

Корак КСНУМКС

Кликните на „Омогући“.

Омогућите АПИ за Гоогле мапе

Омогућите АПИ за Гоогле мапе

Корак КСНУМКС

Кликните на „АПИ“, а затим под „Акредитиви“ видећете свој АПИ кључ.

Кључ АПИ-ја Гоогле Мапс

Кључ АПИ-ја Гоогле Мапс

Корак КСНУМКС

Ако једноставно уграђујете свој АПИ кључ за Гоогле мапе, он ће се приказати у обичном тексту у вашем изворном коду. Због тога би требало да ограничите ово, у супротном би људи могли да користе ваш АПИ кључ на свом ВордПресс сајту или пројектима и повећају вашу употребу.

Да бисте то урадили, једноставно кликните на име вашег АПИ кључа и то ће вам омогућити да додате ограничење. За вашу ВордПресс локацију, једноставно додавање ХТТП упућивача требало би да буде довољно добро. Као такав https://yourdomain.com/*. Ово ће му омогућити да упућује позиве само на вашој веб локацији.

Ограничење кључа АПИ-ја Гоогле мапа

Ограничење кључа АПИ-ја Гоогле мапа

Како додати Гоогле мапе у ВордПресс без додатка

Ако само желите да уградите једноставну мапу и није вам потребна детаљнија функционалност као што су прилагођени маркери локације или друге напомене, можете да уградите Гоогле мапе без додатка користећи нормалну веб локацију Гоогле мапа коју користите свакодневно.

Ево како то функционише ...

Корак 1: Копирајте код за уградњу Гоогле мапа

Да бисте започели, користите веб локацију Гоогле мапа да бисте креирали мапу коју желите да уградите.

На пример, ако желите да уградите маркер места, отворите то место у Гоогле мапама. Или, ако желите да уградите упутства, отворите упутства у Гоогле мапама.

Када имате мапу коју желите да уградите, кликните на мени хамбургера у горњем левом углу:

Како приступити коду за уградњу

Како приступити коду за уградњу

На листи ставки менија изаберите опцију за Делите или уградите мапу:

Отворите опције за уграђивање

Отворите опције за уграђивање

То ће отворити а удео попуп. У том искачућем прозору кликните на Уградите мапу картица.

Затим можете одабрати жељену величину помоћу падајућег менија. За већину ВордПресс сајтова, подразумевана величина добро функционише, али можете повећати или смањити мапу ако је потребно.

Када то урадите, кликните на Копирај ХТМЛ дугме за копирање кода за уградњу:

Код за уградњу ВордПресс Гоогле мапа

Код за уградњу Гоогле мапа

Затим ћете морати да додате свој АПИ кључ у код. Дакле, ваш код би требао изгледати отприлике овако:

Корак 2: Додајте код за уградњу Гоогле мапа на ВордПресс локацију

Сада, све што треба да урадите је да додате тај код за уградњу на своју ВордПресс локацију у посту или страници на коју желите да укључите своју мапу.

Ако користите нови ВордПресс Гутенберг уређивач блокова који је објављен са ВордПресс 5.0, то можете учинити додавањем Прилагођени ХТМЛ блок и лепљење кода за уграђивање у блок. Не заборавите да додате свој АПИ кључ.

Како додати код за уградњу у уређивач блокова ВордПресс-а

Како додати код за уградњу у уређивач блокова ВордПресс-а

Можете да видите како ће ваша мапа изгледати тако што ћете кликнути на Преглед дугме изнад блока.

Ако још увек користите класични ТиниМЦЕ уређивач, можете да додате код за уградњу Гоогле мапа тако што ћете отворити текст таб и налепите код тамо:

Како додати код за уградњу у ВордПресс Цлассиц едитор

Како додати код за уградњу у ВордПресс Цлассиц едитор

Када додате код, можете се вратити на визуелан картицу да бисте видели преглед ваше мапе уживо.

И то је то! Управо сте научили како да додате Гоогле мапе у ВордПресс без додатка.

Користите Гоогле Моје мапе да бисте уградили компликованије мапе без додатка

Ако желите да будете креативнији када су у питању ствари као што су вишеструки маркери локација, прилагођене напомене итд., и даље то можете да урадите без потребе за додатном компонентом са Гоогле-овом услугом Моје мапе.

Моје мапе су званична Гоогле-ова алатка која вам омогућава да креирате и делите сопствене прилагођене мапе. Помоћу њега можете креирати нешто попут примера испод, са пуно прилагођених маркера и прилагођених информација које се приказују када корисник кликне на маркер:

Пример Гоогле мојих мапа

Пример Гоогле мојих мапа

Ево како да га користите за додавање прилагођених Гоогле мапа у ВордПресс.

Корак 1: Направите своју мапу у Гоогле Мојим мапама

Да бисте започели, идите на Гоогле Моје мапе и направите нову мапу. Одатле можете да користите интерфејс за прављење мапа да бисте направили своју мапу:

Интерфејс Гоогле Моје мапе

Интерфејс Гоогле Моје мапе

Иако га нећемо превише детаљно покривати, овај интерфејс вам омогућава да направите неке прилично креативне мапе. За дубљи поглед, овај чланак помоћи од Гоогле-а покрива многе важне функције.

Корак 2: Генерирајте Ембед Цоде

Када завршите са прављењем мапе, потребно је да генеришете код за уградњу.

Међутим, пре него што добијете тај код, прво морате да своју мапу учините јавном. Да бисте то урадили, кликните на удео дугме. Затим кликните на Променити…у искачућем прозору:

Подешавања дељења Гоогле мојих мапа

Подешавања дељења Гоогле мојих мапа

Затим изаберите On - Јавно на вебу и кликните на дугме саве:

Укључите дељење везе

Укључите дељење везе

Када то урадите, кликните на падајући мени поред наслова ваше мапе и изаберите Угради на мој сајт да генеришете стварни код за уградњу:

Приступите коду за уградњу Моје мапе

Приступите коду за уградњу Моје мапе

То ће отворити искачући прозор са кодом, који би требало да копирате. Не заборавите да додате свој АПИ кључ.

Код за уградњу Моје мапе

Код за уградњу Моје мапе

Корак 3: Додајте код за уградњу на ВордПресс локацију

Сада можете да додате тај код за уградњу на своју ВордПресс веб локацију баш као што бисте додали код за уградњу који добијате са обичне веб локације Гоогле мапа.

Ако нисте сигурни како то да урадите, кликните овде да бисте прешли на тај одељак водича одозго.

Уместо тога користите додатак за ВордПресс Гоогле мапе

Осим горе наведених ручних метода, постоји и мноштво додатака за ВордПресс Гоогле мапе који вам могу помоћи да уградите мапе на своју веб локацију.

Постоји неколико разлога због којих бисте можда желели да размотрите један од ових додатака уместо ручних метода:

  • Омогућавају вам да креирате компликованије мапе са једноставним интерфејсом.
  • Можете да урадите све без потребе да напуштате своју ВордПресс контролну таблу.
  • Неки од њих се повезују са ВордПресс-ом. На пример, можда ћете моћи да повежете маркере на мапи са објавама у ВордПресс-у.
  • Неки од њих могу вам помоћи да оптимизујете Гоогле мапе за перформансе (више о овоме касније).

За све ове додатке, мораћете да генеришете сопствени АПИ кључ за Гоогле мапе пре него што почнете да уграђујете мапе. Овај водич вам показује како да то урадите.

Борите се са застојима и проблемима са ВордПресс-ом? Behmaster је решење за хостовање дизајнирано да вам уштеди време! Погледајте наше карактеристике

Гоогле мапе Видгет

Гоогле Мапс Видгет је једноставан додатак за Гоогле мапе који вам омогућава да уградите мапу помоћу Гоогле Мапс Статиц АПИ-ја, који нуди приступ бољим перформансама уграђивањем статичне слике уместо интерактивне мапе (објаснићемо више о овоме у следећем одељку).

То је одлична опција ако желите нешто једноставно и лагано. Када га активирате, мораћете да зграбите свој АПИ кључ Гоогле мапа и прикључите га у подешавања додатка. Можете додати Гоогле мапу било којој области виџета на вашем сајту. Затим посетиоци могу да отворе већу интерактивну верзију мапе у паноу за преглед:

Интерфејс виџета Гоогле мапа

Интерфејс виџета Гоогле мапа

Такође можете одмах да користите интерактивну мапу ако желите, а Про верзија вам омогућава да уградите мапе било где на вашој веб локацији помоћу кратког кода.

Гоогле Мапс Лако

Гоогле Мапс Еаси вам помаже да креирате прилагођене мапе са сопственим маркерима и напоменама.

Када додате маркере, имате могућност да отпремите сопствене прилагођене иконе, укључите текст и слике у опис маркера и још много тога. Такође можете да контролишете како ваша мапа функционише, на пример да изаберете да ли ћете дозволити корисницима да зумирају или не:

Једноставан интерфејс Гоогле мапа

Једноставан интерфејс Гоогле мапа

Када направите своју мапу, можете је уградити помоћу кратког кода или ПХП функције.

Интергео

Интергео је још једна популарна опција која вам омогућава да креирате сопствене мапе са прилагођеним маркерима и имате контролу над функционалношћу мапе.

Када инсталирате и активирате додатак, моћи ћете да правите своје мапе директно са своје ВордПресс контролне табле:

Интергео интерфејс

Интергео интерфејс

Затим можете да их уградите било где на вашој веб локацији помоћу кратког кода.

Гутенберг Блок за Гоогле Мапс Ембед

Гутенберг Блоцк Фор Гоогле Мапс Ембед је једноставан додатак који додаје наменски блок Гоогле Мапс новом ВордПресс Гутенберг уређивачу блокова.

Са овим блоком можете уградити било коју адресу и такође изабрати:

  • Димензије
  • Ниво зумирања
  • Интерактивна мапа наспрам статичне карте (опет, последњи метод помаже у перформансама)

Неће вам дозволити да креирате сопствене прилагођене мапе – али је згодна опција ако користите нови уређивач блокова и само желите једноставан начин да укључите неке једноставне мапе.

Гоогле мапе могу да успоре ваш ВордПресс сајт – не дозволите

Док вам Гоогле мапе омогућавају да уградите гомилу сјајних функција на своју веб локацију са својим интерактивним мапама, постоји компромис у погледу перформанси јер треба да учита велики број скрипти да би покренуо све те интерактивне функције.

Укратко, уграђивање интерактивних Гоогле мапа може успорити вашу веб локацију.

Постоји неколико начина на које се можете борити против овога.

Прво, ако вам не требају људи да бисте могли интерактивно да претражујете вашу мапу на вашој веб страници, једноставан начин да убрзате ствари без икаквих алатки треће стране је:

  • Направите снимак екрана мапе да бисте је користили на свом сајту
  • Повежите тај снимак екрана са мапом на веб локацији Гоогле мапа или отворите искачући прозор са интерактивном мапом када корисник кликне.

На тај начин, ваша веб локација само учитава обичну слику – не све скрипте повезане са Гоогле мапама.

Као алтернативу да ово урадите ручно, такође можете да користите бесплатни додатак АВЕОС Гоогле Мапс ифраме лоад пер цлицк. Овај додатак аутоматски замењује уграђене Гоогле мапе генеричком сликом чувара места. Затим, ако корисник кликне на Учитај мапу дугме, учитаће комплетан уграђени Гоогле мапе:

Слика чувара места Гоогле мапа

Слика чувара места Гоогле мапа

Или можете да користите статички АПИ за Гоогле мапе, који враћа обичну слику без ЈаваСцрипта. Неки додаци за Гоогле мапе – укључујући Гоогле Мапс Видгет и Гутенберг Блоцк Фор Гоогле Мапс Ембед – омогућавају вам да користите статички АПИ када правите своје мапе.

Међутим, схватамо да понекад овај статични приступ једноставно неће успети, и многи људи желе да одмах уграде интерактивно искуство Гоогле мапа.

Ако је то случај, још један добар начин да убрзате Гоогле мапе је употреба лењи утовар. Са лењим учитавањем, ваша веб локација ће чекати да учита све уградње Гоогле мапа испод прелома док посетиоци не почну да померају страницу надоле. То одржава почетно време учитавања странице брзо, а истовремено вам омогућава да уградите интерактивни садржај Гоогле мапа.

Већ смо писали о томе како лењо учитавати слике и видео записе и иста идеја је за Гоогле мапе.

Постоји неколико додатака који ће вам то омогућити. На пример, додатак а3 Лази Лоад вам омогућава лењо учитавање ифраме уграђених елемената, што укључује Гоогле мапе:

Лено учитавање Гоогле мапа

Лено учитавање Гоогле мапа

Остале опције су:

  • БЈ Лази оптерећења
  • Лази Лоад од ВП Роцкет
  • Еаси Лази Лоадер

резиме

Ако само желите да уградите једноставну мапу на своју веб локацију, можете додати Гоогле мапе у ВордПресс без додатка користећи уграђену функцију кода за уграђивање. Или можете да користите алатку Гоогле Моје мапе да направите сопствену прилагођену мапу и уградите је.

Осим ових ручних метода, постоји и много ВордПресс додатака за Гоогле мапе који вам могу пружити пуно контроле без да напуштате своју ВордПресс контролну таблу.

Без обзира који метод одаберете, обратите пажњу на учинак коришћења Гоогле мапа. Покушајте да користите Гоогле мапе само када је то апсолутно неопходно и размотрите тактике као што су слике чувара места или лењо учитавање да бисте смањили негативан ефекат на перформансе.

Имате ли још питања о коришћењу Гоогле мапа на ВордПресс-у? Обавестите нас у коментарима!

Повезани чланци

답글 남기기

이메일 주소는 공개되지 않습니다.

Назад на врх дугмета