Wordpress

WordPress Google Maps Guide: Embed mat oder ouni Plugin

Sicht Dir no engem Wee fir WordPress Google Maps Inhalt op Ärem Site z'integréieren?

Wéi vill Saachen am WordPress, et gi verschidde verschidde Weeër wéi Dir Google Maps op Ärem Site embedde kënnt ofhängeg vun wéi enger Aart vu Kaartinhalt Dir wëllt enthalen.

An dësem Beitrag fänke mir Iech un ze weisen wéi Dir Google Maps a WordPress ouni Plugin addéiere kënnt. Da wäerte mir e puer Plugins recommandéieren kënnen hëllefen Iech Google Maps z'integréieren, souwéi e puer vun de Virdeeler vun dëser Approche. Mir dauchen och a wéi Dir d'Google Maps API richteg benotzt, déi elo erfuerderlech ass.

Schlussendlech wäerte mir mat e puer Leeschtungsconsidératiounen ophalen fir Google Maps op WordPress ze benotzen an e puer Tipps deelen wéi Dir Är WordPress Site séier läscht, och wann Dir Google Maps embed musst.

Dir kënnt hei ënnen klicken fir direkt op eng spezifesch Sektioun ze sprangen oder einfach duerch d'ganz Saach ze liesen.

  • Google Maps API ass elo erfuerderlech
  • Wéi füügt Google Maps op WordPress ouni Plugin
  • WordPress Google Maps Plugins déi Iech méi Flexibilitéit ginn
  • Google Maps Performance Effekt an Tipps fir d'Performance ze verbesseren

Google Maps API ass elo erfuerderlech

Vum 11. Juni 2018, an API Schlëssel ass elo erfuerderlech fir Google Maps. Wann Dir schonn Google Maps op Ärem Site implementéiert hutt an et net méi funktionnéiert, kann dëst de Grond sinn. Oder éischter, Dir fehlt den API Schlëssel. Déi gutt Noriicht ass, fir 99% vun iech, et sollt nach ëmmer gratis sinn. Drënner ass de Google Maps API Präisser.

Google Maps API Präisser

Google Maps API Präisser

Google gëtt Iech och e widderhuelende $200 Kreditt op Ärem Rechnungskonto all Mount fir Är Notzungskäschten ze kompenséieren. Also wéi Dir kënnt gesinn, ausser Dir generéiert Dausende vun Ufroen, d'Benotzung vu Google Maps op Ärem Site sollt Iech näischt kaschten.

Wat huet sech nach geännert? Näischt, awer Dir musst elo déi folgend maachen wann Dir Google Maps a WordPress benotze wëllt:

  1. Mellt Iech un fir e Google Cloud Plattform Console Kont a konfiguréiert et.
  2. Füügt Är Rechnungsinformatioune, och wann Dir vläicht ni fakturéiert gëtt.
  3. Füügt den API Schlëssel op Är Google Maps Embed Code oder Plugin Astellunge.

Wéi kritt een e Google Maps API Key

Drënner sinn Schrëtt fir wéi Dir Äre Google Maps API Schlëssel kritt.

Schrëtt 1

Gitt op d'Google Cloud Plattform Konsol. Wann Dir nach kee Kont hutt, erstellt een, et ass gratis.

Schrëtt 2

Wielt oder erstellt e Projet.

Schrëtt 3

Ariichten Äre Rechnungskonto. Och wa se Iech erfuerderen eng Kreditkaart op Datei ze setzen, sollt Dir ni verrechent ginn, ausser Dir gitt iwwer déi héich Notzungsgrenzen.

Schrëtt 4

Dir wäert gefrot ginn een oder méi Produkter ze wielen. Dëst hänkt vun der Aart vun der Kaart of déi Dir benotzt. Zum Beispill, wann Dir eng Kaart op Ärem WordPress Site ouni Plugin integréiert (wéi an de Schrëtt hei ënnen gewisen), da wielt Dir de Google Maps Embed API.

Google Maps Embed API

Google Maps Embed API

Wann Dir e Plugin benotzt wéi Google Maps Widget (wéi an de Schrëtt hei ënnen gewisen), da wielt Dir de Google Maps Static API.

Wann Dir en Drëtt Partei Plugin oder Thema benotzt, sollten se Dokumentatioun hunn iwwer wéi eng Aart vu Google Maps Deployment se benotzen. Maacht Iech keng Suergen, Dir kënnt ëmmer méi Aarte derbäisetzen an dës spéider änneren.

Schrëtt 5

Klickt op "Enable".

Aktivéiert Google Maps API

Aktivéiert Google Maps API

Schrëtt 6

Klickt op "APIs" an dann ënner "Umeldungsinformatiounen", gesitt Dir Ären API Schlëssel.

Google Maps API Schlëssel

Google Maps API Schlëssel

Schrëtt 7

Wann Dir einfach Äre Google Maps API Schlëssel integréiert, gëtt et am Kloertext an Ärem Quellcode gewisen. Dofir sollt Dir dëst beschränken, soss kënnen d'Leit Ären API-Schlëssel op hirem WordPress Site oder Projeten benotzen an Är Notzung ophalen.

Fir dëst ze maachen, klickt einfach op den Numm vun Ärem API Schlëssel an et erlaabt Iech eng Restriktioun ze addéieren. Fir Är WordPress Site, einfach en HTTP Referrer bäizefügen sollt gutt genuch sinn. Sou wéi https://yourdomain.com/*. Dëst erlaabt et nëmmen Uriff op Ärer Websäit ze maachen.

Google Maps API Schlësselbeschränkung

Google Maps API Schlësselbeschränkung

Wéi Füügt Google Maps A WordPress Ouni Plugin

Wann Dir just eng einfach Kaart wëllt embeden an net méi detailléiert Funktionalitéit wéi personaliséiert Standortmarker oder aner Annotatiounen braucht, kënnt Dir Google Maps ouni Plugin embeden mat der normaler Google Maps Websäit déi Dir all Dag benotzt.

Hei ass wéi et funktionnéiert ...

Schrëtt 1: Kopéiert de Google Maps Embed Code

Fir unzefänken, benotzt d'Google Maps Websäit fir d'Kaart ze kreéieren déi Dir wëllt embeden.

Zum Beispill, wann Dir e Plazmarker wëllt embedecken, öffnen dës Plaz op Google Maps. Oder, wann Dir Richtungen embedde wëllt, öffnen d'Richtungen op Google Maps.

Wann Dir d'Kaart hutt déi Dir wëllt embeden, klickt op den Hamburger Menü an der ieweschter lénkser Ecke:

Wéi Zougang zum Embed Code

Wéi Zougang zum Embed Code

An der Lëscht vun de Menü Elementer, wielt d'Optioun fir Deelen oder embed Kaart:

Öffnen d'Embed Optiounen

Öffnen d'Embed Optiounen

Dat wäert opmaachen a Deelen optauchen. An deem Popup klickt op Embed eng Kaart Tab.

Da kënnt Dir Är gewënschte Gréisst wielen andeems Dir den Dropdown-Menü benotzt. Fir déi meescht WordPress Site funktionnéiert d'Standardgréisst gutt, awer Dir kënnt d'Kaart méi grouss oder méi kleng maachen wann néideg.

Wann Dir dat gemaach hutt, klickt op de HTML kopéieren Knäppchen fir den Embed Code ze kopéieren:

De WordPress Google Maps Embed Code

De Google Maps Embed Code

Dir musst dann Ären API Schlëssel an de Code addéieren. Also Äre Code sollt esou ausgesinn:

Schrëtt 2: Füügt Google Maps Embed Code op WordPress Site

Elo, alles wat Dir maache musst ass deen Embed Code op Är WordPress Site an der Post oder Säit ze addéieren wou Dir Är Kaart wëllt enthalen.

Wann Dir den neie WordPress Gutenberg Block Editor benotzt dee mat WordPress 5.0 verëffentlecht gouf, kënnt Dir dat maachen andeems Dir eng Benotzerdefinéiert HTML blockéieren an den Embed Code an de Block pechen. Vergiesst net Ären API Schlëssel derbäi ze ginn.

Wéi den Embed Code am WordPress Block Editor ze addéieren

Wéi den Embed Code am WordPress Block Editor ze addéieren

Dir kënnt Virschau wéi Är Kaart ausgesäit andeems Dir op klickt Preview Knäppchen iwwer de Block.

Wann Dir nach ëmmer de klassesche TinyMCE Editor benotzt, kënnt Dir de Google Maps Embed Code derbäisetzen andeems Dir de Text Tab a paste de Code do:

Wéi den Embed Code am WordPress Classic Editor ze addéieren

Wéi den Embed Code am WordPress Classic Editor ze addéieren

Wann Dir de Code derbäigesat hutt, kënnt Dir zréck an d' visuell Tab fir eng Live Virschau vun Ärer Kaart ze gesinn.

An dat ass et! Dir hutt just geléiert wéi Dir Google Maps a WordPress addéiere kënnt ouni Plugin.

Benotzt Google Meng Kaarten fir méi komplizéiert Kaarten ouni Plugin z'integréieren

Wann Dir méi kreativ wëllt ginn wann et ëm Saache kënnt wéi verschidde Locationmarker, personaliséiert Annotatiounen, etc., kënnt Dir dat ëmmer nach maachen ouni de Besoin fir e Plugin mam Google's My Maps Service.

Meng Kaarten ass en offiziellen Tool vu Google dat Iech erlaabt Iech Är eege personaliséiert Kaarten ze kreéieren an ze deelen. Mat et kënnt Dir eppes wéi d'Beispill hei ënnen erstellen, mat vill personaliséierte Markéierer a personaliséiert Informatioun déi ugewise gëtt wann e Benotzer op e Marker klickt:

Google My Maps Beispill

Google My Maps Beispill

Hei ass wéi Dir et benotzt fir personaliséiert Google Maps op WordPress ze addéieren.

Schrëtt 1: Erstellt Är Kaart A Google My Maps

Fir unzefänken, gitt op Google My Maps a erstellt eng nei Kaart. Vun do aus kënnt Dir d'Kaart Builder Interface benotze fir Är Kaart ze bauen:

D'Google My Maps Interface

D'Google My Maps Interface

Och wa mir et net ze vill Detail ofdecken, léisst dësen Interface Iech e puer flott kreativ Kaarten bauen. Fir e méi déif Bléck, deckt dësen Hëllefsartikel vu Google vill vun der wichteger Funktionalitéit.

Schrëtt 2: Generéiere Embed Code

Wann Dir fäerdeg sidd Är Kaart ze bauen, musst Dir den Embed Code generéieren.

Ier Dir dee Code awer kritt, musst Dir als éischt Är Kaart ëffentlech maachen. Fir dat ze maachen, klickt op Deelen Knäppchen. Da klickt op änneren... am Popup:

Google My Maps Sharing Settings

Google My Maps Sharing Settings

Dann wielt On - Ëffentlech um Web a klickt op spueren:

Aktivéiert Link Sharing

Aktivéiert Link Sharing

Wann Dir dat gemaach hutt, klickt op den Dropdown-Menü nieft dem Titel vun Ärer Kaart a wielt Embed op mengem Site fir den aktuellen Embed Code ze generéieren:

Zougang zum My Maps Embed Code

Zougang zum My Maps Embed Code

Dat wäert e Popup mam Code opmaachen, deen Dir sollt kopéieren. Vergiesst net Ären API Schlëssel derbäi ze ginn.

De My Maps embed Code

De My Maps embed Code

Schrëtt 3: Füügt Embed Code op WordPress Site

Elo kënnt Dir dësen Embed Code op Är WordPress Site addéieren sou wéi Dir den Embed Code géift deen Dir vun der regulärer Google Maps Websäit kritt.

Wann Dir net sécher sidd wéi Dir dat maacht, klickt hei fir op dës Sektioun vum Tutorial vun uewen ze sprangen.

Benotzt e WordPress Google Maps Plugin amplaz

Iwwert déi manuell Methoden uewendriwwer ginn et och Tonne vu WordPress Google Maps Plugins déi Iech hëllefe kënnen Kaarten op Ärem Site embeden.

Et ginn e puer Grënn firwat Dir wëllt ee vun dëse Plugins iwwer d'manuell Methoden betruechten:

  • Si loossen Iech méi komplizéiert Kaarten mat engem einfachen Interface erstellen.
  • Dir kënnt alles maachen ouni Äert WordPress Dashboard ze verloossen.
  • E puer vun hinnen verlinken op WordPress. Zum Beispill kënnt Dir fäeg sinn Kaartmarker op WordPress Posts ze verbannen.
  • E puer vun hinnen kënnen Iech hëllefen Google Maps fir Leeschtung ze optimiséieren (méi iwwer dëst méi spéit).

Fir all dës Plugins, musst Dir Ären eegene Google Maps API Key generéieren ier Dir Kaarte ka begéinen. Dësen Tutorial weist Iech wéi Dir dat maacht.

Kämpf Dir mat Downtime a WordPress Probleemer? Behmaster ass d'Hosting-Léisung entwéckelt fir Iech Zäit ze spueren! Préift eis Features

Google Maps Widget

Google Maps Widget ass en einfachen Google Maps Plugin deen Iech erlaabt eng Kaart mat der Google Maps Static API ze embedéieren, déi eng méi leeschtungsfrëndlech Approche ubitt andeems en statesch Bild anstatt eng interaktiv Kaart embeet (mir wäerten méi iwwer dëst an der nächster Rubrik erklären).

Et ass eng super Optioun wann Dir eppes einfach a liicht wëllt. Wann Dir et aktivéiert hutt, musst Dir Äre Google Maps API Schlëssel gräifen an se an d'Astellunge vum Plugin plugin. Dir kënnt eng Google Map zu all Widgetberäich op Ärem Site addéieren. Da kënnen d'Besucher eng méi grouss interaktiv Versioun vun der Kaart an enger Lightbox opmaachen:

D'Google Maps Widget Interface

D'Google Maps Widget Interface

Dir kënnt och direkt eng interaktiv Kaart benotzen wann Dir wëllt, an d'Pro Versioun léisst Iech Kaarten iwwerall op Ärem Site mat engem Shortcode embed.

Google Maps Einfach

Google Maps Easy hëlleft Iech personaliséiert Kaarten mat Ären eegene Markéierer an Annotatiounen ze kreéieren.

Wann Dir Markéierer bäidréit, hutt Dir d'Fäegkeet Är eege personaliséiert Ikonen eropzelueden, Text a Biller an der Markerbeschreiwung enthalen, a vill méi. Dir kënnt och kontrolléieren wéi Är Kaart funktionnéiert, wéi Dir wielt ob d'Benotzer zoomen oder net:

Google Maps Einfach Interface

Google Maps Einfach Interface

Wann Dir Är Kaart baut, kënnt Dir se mat engem Shortcode oder PHP Funktioun embeden.

Intergeo

Intergeo ass eng aner populär Optioun, déi Iech erlaabt Är eege Kaarten mat personaliséierte Markéierer ze kreéieren an d'Kontroll iwwer d'Kaartfunktionalitéit ze hunn.

Wann Dir de Plugin installéiert an aktivéiert hutt, kënnt Dir Är Kaarten direkt vun Ärem WordPress Dashboard bauen:

Intergeo Interface

Intergeo Interface

Da kënnt Dir se iwwerall op Ärem Site mat engem Shortcode embed.

Gutenberg Block Fir Google Maps Embed

Gutenberg Block Fir Google Maps Embed ass en einfache Plugin deen en dedizéierten Google Maps Block un den neie WordPress Gutenberg Block Editor bäidréit.

Mat dësem Block kënnt Dir all Adress embeden an och wielen:

  • Dimensiounen
  • Zoomniveau
  • Interaktiv Kaart vs statesch Kaart (erëm, déi lescht Method hëlleft mat der Leeschtung)

Et léisst Iech net Är eege personaliséiert Kaarten erstellen - awer et ass eng praktesch Optioun wann Dir den neie Blockeditor benotzt a just en einfache Wee wëllt fir e puer einfache Kaarten ze enthalen.

Google Maps kënnen Äre WordPress Site verlangsamen - Loosst et net

Wärend Google Maps Iech eng Tonne cool Funktionalitéit op Äre Site mat sengen interaktiven Kaarten erlaabt, gëtt et e Performance Trade-Off well et eng grouss Zuel vu Skripte muss lueden fir all déi interaktiv Funktionalitéit ze stäerken.

Laang Geschicht kuerz, integréiert interaktiv Google Maps kann Äre Site verlangsamen.

Et ginn e puer Weeër fir dëst ze bekämpfen.

Als éischt, wann Dir keng Leit braucht fir Är Kaart interaktiv ze duerchsichen op Ärer Websäit, en einfache Wee fir Saachen ze beschleunegen ouni Drëtt-Partei-Tools ass:

  • Huelt e Screenshot vun der Kaart fir op Ärem Site ze benotzen
  • Link dat Screenshot op d'Kaart op der Google Maps Websäit, oder öffnen e Lightbox Popup mat der interaktiver Kaart wann e Benotzer klickt.

Op déi Manéier lued Äre Site just e normale Bild - net all d'Skripte, déi mat Google Maps verbonne sinn.

Als Alternativ fir dëst manuell ze maachen, kënnt Dir och de gratis AWEOS Google Maps iframe Load pro Click Plugin benotzen. Dëse Plugin ersetzt automatesch Google Maps Embeds mat engem generesche Plazhalterbild. Dann, wann e Benotzer klickt op Lueden Kaart Knäppchen, wäert et déi voll Google Maps Embed lueden:

Google Maps Plazhalter Bild

Google Maps Plazhalter Bild

Oder Dir kënnt och d'Google Maps Static API benotzen, déi e normale Bild ouni JavaScript zréckginn. E puer Google Maps Plugins - dorënner Google Maps Widget a Gutenberg Block Fir Google Maps Embed - léisst Iech d'Static API benotzen wann Dir Är Kaarten erstellt.

Wéi och ëmmer, mir mierken datt heiansdo dës statesch Approche et einfach net schneiden, a vill Leit wëllen déi interaktiv Google Maps Experienz direkt embedéieren.

Wann dat de Fall ass, ass en anere gudde Wee fir Google Maps ze beschleunegen ze benotzen liddereg lueden. Mat fauler Lueden, wäert Äre Site waarden fir all ënner-de-klappt Google Maps Embeds ze lueden bis d'Besucher ufänken d'Säit erof ze scrollen. Dat hält Är initial Säit Laaschtzäite séier, wärend Dir ëmmer nach interaktive Google Maps Inhalt embett.

Mir hu scho geschriwwen iwwer wéi faul Biller a Videoen ze lueden an et ass déiselwecht Iddi fir Google Maps.

Et ginn e puer Plugins déi Iech erlaben dëst ze maachen. Zum Beispill, den a3 Lazy Load Plugin léisst Iech faul laden iframe Embeds, déi Google Maps enthält:

Lazy Luede Google Maps

Lazy Luede Google Maps

Aner Optiounen sinn:

  • BJ Lazy Lueden
  • Lazy Load vun WP Rocket
  • Einfach Lazy Loader

Resumé

Wann Dir just eng einfach Kaart op Ärem Site wëllt embeden, kënnt Dir Google Maps op WordPress addéieren ouni Plugin mat der agebauter Embed Code Feature. Oder, Dir kënnt de Google My Maps Tool benotze fir Är eege personaliséiert Kaart ze kreéieren an dat z'integréieren.

Zousätzlech zu dësen manuelle Methoden, ginn et och vill Google Maps WordPress Plugins déi Iech vill Kontroll kënne ginn ouni datt Dir Äert WordPress Dashboard verloosst.

Egal wéi eng Method Dir wielt, oppassen op d'Performance Impakt vun der Benotzung vu Google Maps. Probéiert nëmmen Google Maps ze benotzen wann absolut néideg a berücksichtegt Taktiken wéi Plazhalterbilder oder faul Luede fir den negativen Effekt op d'Leeschtung ze reduzéieren.

Hutt Dir aner Froen iwwer d'Benotzung vu Google Maps op WordPress? Loosst eis an de Kommentaren wëssen!

Verbonnen Artikelen

Hannerlooss eng Äntwert

Är E-Mail-Adress gëtt net publizéiert ginn.

Zréck erop zum Knäppchen