Wordpress

Guia de Google Maps de WordPress: incrusta amb o sense connector

Esteu buscant una manera d'inserir contingut de Google Maps de WordPress al vostre lloc?

Com moltes coses a WordPress, hi ha diverses maneres diferents d'incorporar Google Maps al vostre lloc en funció del tipus de contingut del mapa que vulgueu incloure.

En aquesta publicació, començarem mostrant-vos com afegir Google Maps a WordPress sense un complement. Aleshores, recomanarem alguns connectors que llauna ajudar-vos a integrar Google Maps, així com alguns dels avantatges d'aplicar aquest enfocament. També analitzarem com utilitzar correctament l'API de Google Maps, que ara és necessària.

Finalment, acabarem amb algunes consideracions de rendiment per utilitzar Google Maps a WordPress i compartirem alguns consells sobre com mantenir la càrrega ràpida del vostre lloc de WordPress, fins i tot si necessiteu incrustar Google Maps.

Podeu fer clic a continuació per anar directament a una secció específica o simplement llegir-ho tot.

  • Ara cal l'API de Google Maps
  • Com afegir Google Maps a WordPress sense un complement
  • Complements de Google Maps de WordPress que us ofereixen més flexibilitat
  • Efecte de rendiment de Google Maps i consells per millorar el rendiment

Ara es requereix l'API de Google Maps

A partir de l'11 de juny de 2018, an Ara cal la clau API per a Google Maps. Si ja heu implementat Google Maps al vostre lloc i ja no funciona, aquest podria ser el motiu. O millor dit, us falta la clau de l'API. La bona notícia és que per al 99% de vosaltres, encara hauria de ser gratuït. A continuació es mostra el preu de l'API de Google Maps.

Preus de l'API de Google Maps

Preus de l'API de Google Maps

Google també us ofereix un crèdit recurrent de 200 dòlars al vostre compte de facturació cada mes per compensar els vostres costos d'ús. Així, com podeu veure, tret que genereu milers de sol·licituds, utilitzar Google Maps al vostre lloc no us hauria de costar res.

Què més ha canviat? Res, però ara haureu de fer el següent si voleu utilitzar Google Maps a WordPress:

  1. Registreu-vos per obtenir un compte de consola de Google Cloud Platform i configureu-lo.
  2. Afegeix la teva informació de facturació, tot i que potser no se't faci mai.
  3. Afegiu la clau de l'API al codi d'inserció o a la configuració del connector de Google Maps.

Com obtenir una clau d'API de Google Maps

A continuació es mostren els passos per obtenir la clau de l'API de Google Maps.

Aneu a la consola de Google Cloud Platform. Si encara no tens cap compte, crea'n un, és gratuït.

Seleccioneu o creeu un projecte.

Configura el teu compte de facturació. Tot i que us demanaran que inscriviu una targeta de crèdit, mai no us hauríeu de cobrar, tret que supereu els alts límits d'ús.

Se us demanarà que trieu un o més productes. Això depèn del tipus de mapa que utilitzeu. Per exemple, si incrusteu un mapa al vostre lloc de WordPress sense un connector (com es mostra als passos més avall), trieu l'API d'inserció de Google Maps.

API d'inserció de Google Maps

API d'inserció de Google Maps

Si utilitzeu un connector com Google Maps Widget (com es mostra als passos més avall), triareu l'API estàtica de Google Maps.

Si utilitzeu un complement o un tema de tercers, haurien de tenir documentació sobre quin tipus de desplegament de Google Maps estan utilitzant. No us preocupeu, sempre podeu afegir diversos tipus i canviar-los més endavant.

Feu clic a "Activa".

Activa l'API de Google Maps

Activa l'API de Google Maps

Feu clic a "APIs" i després a "Credencials", veureu la vostra clau de l'API.

Clau de l'API de Google Maps

Clau de l'API de Google Maps

Si simplement esteu inserint la vostra clau de l'API de Google Maps, es mostrarà en text sense format al vostre codi font. Per tant, hauríeu de restringir-ho, en cas contrari, la gent podria utilitzar la vostra clau API al seu lloc o projectes de WordPress i augmentar el vostre ús.

Per fer-ho, només cal que feu clic al nom de la vostra clau API i us permetrà afegir una restricció. Per al vostre lloc de WordPress, simplement afegir un referent HTTP hauria de ser prou bo. Tal com https://yourdomain.com/*. Això li permetrà només fer trucades al vostre lloc web.

Restricció de clau de l'API de Google Maps

Restricció de clau de l'API de Google Maps

Com afegir Google Maps a WordPress sense un connector

Si només voleu incrustar un mapa senzill i no necessiteu una funcionalitat més detallada, com ara marcadors d'ubicació personalitzats o altres anotacions, podeu inserir Google Maps sense un connector mitjançant el lloc web normal de Google Maps que feu servir diàriament.

Aquí és com funciona ...

Pas 1: copieu el codi d'inserció de Google Maps

Per començar, utilitzeu el lloc web de Google Maps per crear el mapa que voleu incrustar.

Per exemple, si voleu inserir un marcador de lloc, obriu aquest lloc a Google Maps. O, si voleu inserir indicacions, obriu les indicacions a Google Maps.

Un cop tingueu el mapa que voleu incrustar, feu clic al menú d'hamburgueses a la cantonada superior esquerra:

Com accedir al codi incrustat

Com accedir al codi incrustat

A la llista d'elements del menú, seleccioneu l'opció per Compartir o incrustar el mapa:

Obriu les opcions d'inserció

Obriu les opcions d'inserció

Això obrirà a Compartir finestra emergent. En aquesta finestra emergent, feu clic a Insereix un mapa Tab.

A continuació, podeu triar la mida desitjada mitjançant el desplegable. Per a la majoria de llocs de WordPress, la mida predeterminada funciona bé, però podeu fer que el mapa sigui més gran o més petit si cal.

Un cop ho hàgiu fet, feu clic a Copia HTML botó per copiar el codi d'inserció:

El codi incrustat de Google Maps de WordPress

El codi d'inserció de Google Maps

Aleshores, haureu d'afegir la vostra clau API al codi. Així que el vostre codi hauria de semblar a això:

Pas 2: afegiu el codi d'inserció de Google Maps al lloc de WordPress

Ara, tot el que heu de fer és afegir aquest codi incrustat al vostre lloc de WordPress a la publicació o pàgina on voleu incloure el vostre mapa.

Si utilitzeu el nou editor de blocs de WordPress Gutenberg que es va publicar amb WordPress 5.0, podeu fer-ho afegint un HTML personalitzat bloquejar i enganxar el codi incrustat al bloc. No oblideu afegir la vostra clau API.

Com afegir el codi incrustat a l'editor de blocs de WordPress

Com afegir el codi incrustat a l'editor de blocs de WordPress

Podeu previsualitzar com es veurà el vostre mapa fent clic a Vista prèvia botó a sobre del bloc.

Si encara esteu utilitzant l'editor clàssic de TinyMCE, podeu afegir el codi d'inserció de Google Maps obrint el Text pestanya i enganxant-hi el codi:

Com afegir el codi incrustat a l'editor clàssic de WordPress

Com afegir el codi incrustat a l'editor clàssic de WordPress

Un cop afegiu el codi, podeu tornar a Visual pestanya per veure una vista prèvia en directe del mapa.

I ja està! Acabeu d'aprendre a afegir Google Maps a WordPress sense un complement.

Utilitzeu Google My Maps per incrustar mapes més complicats sense un connector

Si voleu ser més creatius quan es tracta de coses com ara diversos marcadors d'ubicació, anotacions personalitzades, etc., encara podeu fer-ho sense necessitat d'un connector amb el servei My Maps de Google.

My Maps és una eina oficial de Google que us permet crear i compartir els vostres propis mapes personalitzats. Amb ell, podeu crear alguna cosa com l'exemple següent, amb molts marcadors personalitzats i informació personalitzada que es mostra quan un usuari fa clic en un marcador:

Exemple de Google My Maps

Exemple de Google My Maps

A continuació s'explica com utilitzar-lo per afegir Google Maps personalitzats a WordPress.

Pas 1: creeu el vostre mapa a Google My Maps

Per començar, aneu a Google My Maps i creeu un mapa nou. A partir d'aquí, podeu utilitzar la interfície del creador de mapes per crear el vostre mapa:

La interfície de Google My Maps

La interfície de Google My Maps

Tot i que no ho tractarem amb massa detall, aquesta interfície us permet crear mapes força creatius. Per a una mirada més profunda, aquest article d'ajuda de Google cobreix moltes de les funcionalitats importants.

Pas 2: genera el codi d'inserció

Un cop hàgiu acabat de crear el vostre mapa, heu de generar el codi d'inserció.

Tanmateix, abans de poder obtenir aquest codi, primer heu de fer públic el vostre mapa. Per fer-ho, feu clic a Compartir botó. A continuació, feu clic a Canviar...a la finestra emergent:

Configuració d'ús compartit de Google My Maps

Configuració d'ús compartit de Google My Maps

A continuació, seleccioneu On - Públic a la web and clic Desar:

Activa la compartició d'enllaços

Activa la compartició d'enllaços

Un cop ho hàgiu fet, feu clic al menú desplegable que hi ha a prop del títol del mapa i seleccioneu Insereix al meu lloc per generar el codi incrustat real:

Accediu al codi d'inserció de My Maps

Accediu al codi d'inserció de My Maps

Això obrirà una finestra emergent amb el codi, que hauríeu de copiar. No oblideu afegir la vostra clau API.

El codi d'inserció dels meus mapes

El codi d'inserció dels meus mapes

Pas 3: afegiu el codi incrustat al lloc de WordPress

Ara, podeu afegir aquest codi d'inserció al vostre lloc de WordPress igual que ho faríeu amb el codi d'inserció que obteniu del lloc web habitual de Google Maps.

Si no esteu segur de com fer-ho, feu clic aquí per anar a aquesta secció del tutorial des de dalt.

Utilitzeu un connector de Google Maps de WordPress

Més enllà dels mètodes manuals anteriors, també hi ha un munt de connectors de Google Maps de WordPress que us poden ajudar a inserir mapes al vostre lloc.

Hi ha alguns motius pels quals potser voldreu considerar un d'aquests connectors sobre els mètodes manuals:

  • Us permeten crear mapes més complicats amb una interfície senzilla.
  • Pots fer-ho tot sense haver de sortir del tauler de WordPress.
  • Alguns d'ells enllacen a WordPress. Per exemple, és possible que pugueu enllaçar marcadors de mapa a publicacions de WordPress.
  • Alguns d'ells us poden ajudar a optimitzar el rendiment de Google Maps (més sobre això més endavant).

Per a tots aquests connectors, haureu de generar la vostra pròpia clau de l'API de Google Maps abans de poder començar a incrustar mapes. Aquest tutorial us mostra com fer-ho.

Teniu problemes amb el temps d'inactivitat i amb WordPress? Behmaster és la solució d'allotjament dissenyada per estalviar-vos temps! Consulteu les nostres característiques

Mapes Google Widget

El widget de Google Maps és un connector senzill de Google Maps que us permet inserir un mapa mitjançant l'API estàtica de Google Maps, que ofereix un enfocament més favorable al rendiment mitjançant la inserció d'una imatge estàtica en lloc d'un mapa interactiu (explicarem més sobre això a la següent secció).

És una gran opció si voleu quelcom senzill i lleuger. Un cop l'hagueu activat, haureu d'agafar la vostra clau de l'API de Google Maps i connectar-la a la configuració del connector. Podeu afegir un mapa de Google a qualsevol àrea de widgets del vostre lloc. A continuació, els visitants poden obrir una versió interactiva més gran del mapa en una caixa de llum:

La interfície del widget de Google Maps

La interfície del widget de Google Maps

També podeu utilitzar un mapa interactiu immediatament si ho voleu, i la versió Pro us permet inserir mapes a qualsevol lloc del vostre lloc amb un codi curt.

Google Maps fàcil

Google Maps Easy us ajuda a crear mapes personalitzats amb els vostres propis marcadors i anotacions.

Quan afegiu marcadors, teniu la possibilitat de penjar les vostres pròpies icones personalitzades, incloure text i imatges a la descripció del marcador i molt més. També podeu controlar com funciona el vostre mapa, com ara escollir si voleu o no permetre que els usuaris ampliquin:

Interfície fàcil de Google Maps

Interfície fàcil de Google Maps

Un cop hàgiu creat el mapa, podeu incrustar-lo mitjançant un codi curt o una funció PHP.

Intergeo

Intergeo és una altra opció popular que us permet crear els vostres propis mapes amb marcadors personalitzats i tenir control sobre la funcionalitat del mapa.

Un cop instal·leu i activeu el connector, podreu crear els vostres mapes directament des del vostre tauler de control de WordPress:

Interfície intergeo

Interfície intergeo

A continuació, podeu inserir-los a qualsevol lloc del vostre lloc mitjançant un codi curt.

Bloc Gutenberg per incrustar Google Maps

Gutenberg Block For Google Maps Embed és un connector senzill que afegeix un bloc dedicat de Google Maps al nou editor de blocs Gutenberg de WordPress.

Amb aquest bloc, podeu incrustar qualsevol adreça i també triar:

  • dimensions
  • Nivell de zoom
  • Mapa interactiu vs mapa estàtic (de nou, aquest últim mètode ajuda amb el rendiment)

No us permetrà crear els vostres propis mapes personalitzats, però és una opció convenient si feu servir el nou editor de blocs i només voleu una manera fàcil d'incloure alguns mapes senzills.

Google Maps pot alentir el vostre lloc de WordPress: no ho deixeu

Tot i que Google Maps us permet integrar un munt de funcionalitats interessants al vostre lloc amb els seus mapes interactius, hi ha un compromís de rendiment perquè necessita carregar un gran nombre d'scripts per potenciar tota aquesta funcionalitat interactiva.

En resum, la inserció de Google Maps interactiu pot alentir el vostre lloc.

Hi ha algunes maneres de combatre això.

Primer, si no necessiteu que la gent pugui navegar pel vostre mapa de manera interactiva al vostre lloc web, una manera senzilla d'accelerar les coses sense cap eina de tercers és:

  • Feu una captura de pantalla del mapa per utilitzar-lo al vostre lloc
  • Enllaceu aquesta captura de pantalla al mapa del lloc web de Google Maps o obriu una finestra emergent amb el mapa interactiu quan un usuari faci clic.

D'aquesta manera, el vostre lloc només carrega una imatge normal, no tots els scripts associats a Google Maps.

Com a alternativa a fer-ho manualment, també podeu utilitzar el connector gratuït de càrrega per clic iframe d'AWEOS Google Maps. Aquest connector substitueix automàticament les insercions de Google Maps per una imatge de marcador de posició genèrica. Aleshores, si un usuari fa clic a Carrega el mapa botó, carregarà la inserció completa de Google Maps:

Imatge de marcador de posició de Google Maps

Imatge de marcador de posició de Google Maps

O també podeu utilitzar l'API estàtica de Google Maps, que retorna una imatge normal sense JavaScript. Alguns connectors de Google Maps, com ara Google Maps Widget i Gutenberg Block For Google Maps Embed, us permeten utilitzar l'API estàtica quan creeu els vostres mapes.

Tanmateix, ens adonem que, de vegades, aquest enfocament estàtic no ho redueix, i molta gent vol integrar l'experiència interactiva de Google Maps immediatament.

Si aquest és el cas, una altra bona manera d'accelerar Google Maps és utilitzar-lo carregada mandrosa. Amb la càrrega mandrosa, el vostre lloc esperarà per carregar qualsevol inserció de Google Maps a sota del plec fins que els visitants comencen a desplaçar-se per la pàgina. Això fa que els temps inicials de càrrega de la pàgina siguin ràpids, alhora que us permet inserir contingut interactiu de Google Maps.

Ja hem escrit sobre com carregar mandrosos imatges i vídeos i és la mateixa idea per a Google Maps.

Hi ha uns quants connectors que us permetran fer-ho. Per exemple, el connector a3 Lazy Load us permet incrustacions d'iframe de càrrega lazy, que inclou Google Maps:

Càrrega mandrosa de Google Maps

Càrrega mandrosa de Google Maps

Altres opcions són:

  • BJ Lazy Load
  • Lazy Load de WP Rocket
  • Easy Lazy Loader

resum

Si només voleu incrustar un mapa senzill al vostre lloc, podeu afegir Google Maps a WordPress sense un complement mitjançant la funció de codi d'inserció integrada. O bé, podeu utilitzar l'eina Google My Maps per crear el vostre propi mapa personalitzat i inserir-lo.

Més enllà d'aquests mètodes manuals, també hi ha molts complements de WordPress de Google Maps que us poden donar molt de control sense fer-vos sortir del vostre tauler de control de WordPress.

Independentment del mètode que trieu, presteu atenció a l'impacte en el rendiment de l'ús de Google Maps. Intenteu utilitzar Google Maps només quan sigui absolutament necessari i considereu tàctiques com ara imatges de marcador de posició o càrrega mandrosa per reduir l'efecte negatiu sobre el rendiment.

Tens altres preguntes sobre l'ús de Google Maps a WordPress? Fes-nos-ho saber als comentaris!

Articles Relacionats

답글 남기기

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

Torna al botó superior