In dit artikel laat ik je zien hoe je een responsieve Google Maps-kaart kunt toevoegen aan een WordPress-webpagina (bijvoorbeeld voor een contactpagina) zonder een plug-in te gebruiken. Ik gebruik WordPress 6.0 voor deze tutorial, evenals het Twenty Twenty Two-thema, het standaardthema voor deze versie van WordPress.

 Met de functie Google Maps kunt u de locatie van uw bedrijf weergeven op een interactieve kaart, zodat bezoekers van de site gemakkelijk kunnen zien waar u zich bevindt en interactie met de kaart om te zien wat er nog meer om u heen is, een routebeschrijving op te vragen, enz. Het toont aan bezoekers van de site dat je een lokaal bedrijf bent en een echte, fysieke locatie hebt. Het is heel gebruikelijk voor bedrijven om een ​​kaart op hun contactpagina te hebben.

Er zijn talloze plug-ins voor Google Maps, maar veel ervan zijn onhandig en vereisen ofwel betaling voor de volledige plug-infuncties of een Google Developer-account met ingewikkelde stappen die een minder dan gewenst resultaat opleveren.

Dit alles gezegd hebbende, er is een heel eenvoudige manier om Google Maps toe te voegen aan je WordPress 6.0-pagina's zonder plug-ins en zonder een heleboel ingewikkelde stappen. Laten we erin duiken.

Inhoudsopgave

Stap 1: Maak een HTML-blok aan

Om te beginnen logt u in op het beheerdersgedeelte van uw WordPress-site en navigeert u naar het gedeelte "Pagina's" (rode pijl in de bovenstaande afbeelding).

Klik op de pagina waaraan u uw Google Maps-functie wilt toevoegen (u kunt op de paginanaam klikken, in mijn geval "Contact" - blauwe pijl in de bovenstaande afbeelding - of klik eenvoudig op "Bewerken" onder de paginanaam).

Als u een blokthema zoals Twenty Twenty Two gebruikt, bevindt u zich nu in de Block Editor voor uw pagina. Scrol omlaag naar de locatie waar u uw kaart wilt invoegen.

Klik vervolgens op het pictogram "+" (de "Block Inserter" - rode pijl in de afbeelding hierboven) om een ​​blok in te voegen.

Zoek naar "Groep" in het zoekveld (groen weergegeven op de foto) en klik om het groepsblok toe te voegen (rode pijl). Hiermee kunt u enkele aangepaste instellingen toevoegen aan het blokelement.

Klik bijvoorbeeld op de optie "Uitlijning wijzigen" (rode pijl) en selecteer "Volledige breedte" (groene pijl). Hierdoor wordt de breedte van het blok dat onze interactieve kaart van Google Maps bevat over de volledige breedte.

Klik vervolgens op de grote "+" knop in de groep (rode pijl in de bovenstaande foto). Zoek naar "HTML" in de zoekbalk (groen weergegeven) en klik op het blok "Aangepaste HTML" (blauwe pijl).

Je zult zien dat er nu staat "Schrijf html ..." (rode pijl). Hier voegen we onze kaart toe.

WordPress vereenvoudigd: cursus krachtige websites bouwen door Davies Media Design

Stap 2: Genereer Google Maps Embed HTML

We moeten nu onze kaart genereren met Google Maps. Open hiervoor een nieuw browsertabblad en ga naar Google.com als dit niet uw standaardzoekbrowser is.

Typ vervolgens het adres dat u op uw kaart wilt weergeven. Voor dit voorbeeld gebruik ik het Empire State Building (rode pijl). U kunt voor dit gedeelte het exacte adres van uw bedrijf gebruiken (dwz huisnummer, straat, stad, staat en postcode - of wat u ook typt voor internationale adressen als u zich niet in de VS bevindt).

Klik op de kaartafbeelding die voor uw adres verschijnt op de pagina met zoekresultaten voor zoekmachines (rode pijl in de afbeelding - deze staat ofwel in het midden van de pagina of aan de rechterkant, afhankelijk van of u een adres of de naam van een plek, zoals ik deed).

Uw adres verschijnt nu als een markering op de kaart op volledig scherm (rode pijl in de bovenstaande afbeelding). Je ziet ook verschillende pictogrammen onder het adres of de titel van de plaats die je hebt gezocht. Deze pictogrammen omvatten 'Routebeschrijving', 'Opslaan', 'In de buurt', 'Verzenden naar telefoon' en 'Delen'. Klik op het pictogram "Delen" (blauwe pijl).

Klik op het tabblad "Delen" dat verschijnt op het tabblad "Een kaart insluiten" (blauwe pijl in de bovenstaande foto).  

Op dit tabblad ziet u een voorbeeld van uw ingesloten Google Maps-widget. Er is een vervolgkeuzelijst met afmetingen aan de linkerkant van de code (groene pijl) - u kunt een vooraf gemaakte maat selecteren of "Aangepast" kiezen om uw eigen maat in te stellen. Ik selecteer de optie "Aangepast" (rode pijl).

Hier ziet u de afmetingen voor mijn aangepaste kaart. Ik stel de hoogte, of de eerste dimensie, in op 1200 (rode pijl). Ik laat de breedte op 600 staan. Je kunt klikken op "Voorbeeld van werkelijke grootte" (groene pijl) om de kaart in een nieuw pop-upvenster op volledige grootte weer te geven (zorg ervoor dat je eventuele pop-upblokkers uitschakelt als je die hebt ingeschakeld om te voorkomen dat het venster wordt geblokkeerd). Verlaat het voorbeeldvenster als u klaar bent.

Klik vervolgens op de link "HTML kopiëren" (blauwe pijl). Dit is de code die we naar onze WordPress-pagina zullen brengen.

Stap 3: Plak HTML-code op WordPress-pagina

Navigeer terug naar het browsertabblad dat uw WordPress-website bevat. Klik op het lege HTML-blok waar staat "Schrijf hier HTML ..." en plak de code (rode pijl) door op ctrl + v op je toetsenbord te drukken (cmd + v op een mac).

Als u op de optie "Voorbeeld" in de Blokkenwerkbalk (rode pijl) klikt, ziet u nu uw kaart op uw pagina (groene pijl). Klik terug op de optie “HTML” om terug te keren naar de HTML-code (blauwe pijl).

We hebben onze kaart ingesloten op onze pagina, maar deze reageert niet - wat betekent dat als we de kaart op een kleiner scherm bekijken, zoals een tablet of een telefoon, het formaat niet wordt aangepast aan het scherm. Om dit op te lossen, moeten we een aangepaste stijl aan de HTML-code toevoegen.

Stap 4: Maak Google Maps responsief

ik zal zijn met de code die ik van deze website heb gekregen om de insluiting van Google Maps responsief te maken. Scrol omlaag naar het gedeelte met het label 'Responsief insluiten van Google Maps' (rode pijl). Blader vervolgens omlaag naar de tweede set code (blauwe pijl).

Kopieer alles van " ”  to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).

Navigeer terug naar WordPress. Klik met uw muis helemaal vooraan de HTML-code om deze nieuwe code aan het begin in te voegen (rode pijl). Druk op ctrl+v om je code te plakken.

Klik ten slotte helemaal aan het einde van de HTML-code (rode pijl) en typ " ” om alles af te sluiten. Wat je zojuist hebt gedaan, is je HTML-code in een aangepaste stijl wikkelen. Deze stijl vertelt de browser van de bezoeker om het formaat van de kaart te wijzigen op basis van de grootte van het venster waarin ze deze bekijken.

Stap 5: Pas de beeldverhouding van de interactieve kaart aan

Er is nog een laatste ding dat we moeten doen - scroll terug naar de bovenkant van de code totdat je "padding-bottom: 75%;" ziet. (rode pijl). Dit stukje code bepaalt de beeldverhouding van de kaart.

Omdat ik het formaat van mijn kaart heb aangepast naar 1200 x 600, heeft deze een beeldverhouding van 2:1. Hiervoor moet ik het percentage wijzigen in "50%" (rode pijl).

Als u niet zeker weet welk percentage u voor uw kaart moet gebruiken, neemt u gewoon de beeldverhouding (dwz 16:9) en deelt u het tweede getal door het eerste om uw percentage te krijgen (9 gedeeld door 16 is 56.25%).

Klik op "Bijwerken" om uw wijzigingen toe te passen (blauwe pijl in de bovenstaande afbeelding) en klik vervolgens op "Pagina weergeven" in de linkerbenedenhoek om het resultaat te zien.

U zou nu uw Google Maps-widget moeten zien verschijnen (rode pijl in de bovenstaande afbeelding).

U kunt het reactievermogen testen door de grootte van uw browser te verkleinen en vervolgens terug te scrollen naar het gedeelte van de webpagina met de kaart.

Dat was het voor deze tutorial! Als je het leuk vond en wilt leren hoe je vanaf het begin je eigen professionele WordPress-website kunt maken, kun je je inschrijven voor mijn WordPress vereenvoudigd: cursus krachtige websites bouwen op Udemy, of bekijk mijn andere WordPress-zelfstudies!

Davies Media Design Gratis creatieve apps E-mailnieuwsbrief

Abonneer u op de DMD-nieuwsbrief

Meld u aan om nieuwe tutorials, cursusupdates en het laatste nieuws over uw favoriete gratis creatieve apps te ontvangen!

Je bent met succes geabboneerd!

Pin It op Pinterest