Google maps weergeven in een wordpress bericht of pagina

Brugge

Een Bing map kan u enkel koppelen aan tekst of een afbeelding.
Klik hierboven op de titel van de stad Brugge

Maar Google maps kan u ook weergeven in een blogbericht.

Voorbeeld 1 en 2: met Labels (straatnamen weergeven) aangevinkt.
Grootte van de kaart 560px Br x 400 px Hg.

.

.
Voorbeeld 3: met Labels (straatnamen weergeven) en plaatsnaam (mogelijkheid routebeschrijving en in de buurt zoeken) aangevinkt.
Grootte van de kaart 425px Br x 350 px Hg

Werkwijze voor het inbedden en weergeven van één of meerdere Google maps in een wordpress bericht of pagina.

Ga naar http://maps.google.com of ga naar Google.com en druk op Maps

Klik rechts van het typveld op het pictogram met het toetsenboerd om het online querty klavier te gebruiken of tik op uw eigen toetsenbord een adres of plaatsnaam (locatie) in en klik vervolgens op Zoeken in Maps, het pictogram met het vergrootglas

Maak in de rechterbovenzijde u keuze welke kaart u wenst weer te geven en klik op Kaart of Sateliet

Vink Labels aan, indien u de straat, plaats en begrenzingsnamen op de kaart wilt weergeven

Vink de plaatsnaam aan (Markt, Brugge…) indien u een plaats in de buurt wilt laten opzoeken. (voorbeeld 3)

In de linkerzijde van de kaart, ziet u een schuiflijn.
Sleep de muis over de schuiflijn om in en uit te zoomen naar de gewenste grootte

En versleep de kaart tot u precies bekomt wat uw wilt weergeven

Is uw kaart naar wens weergegeven, klik dan in de rechterbovenhoek op de Link, het pictogram met de schakel.

U hebt nu de keuze uit 2 mogelijkheden:
1. De link kopieren om deze daarna te plakken in een email of te koppelen aan een afbeelding of tekst, zodat op de link of de afbeelding dient geklikt, om de kaart weer te geven.
2. De iframe code kopieren om de Google kaart bij voorbeeld rechtstreeks op uw blog of website zelf te laten bekijken

Wilt u de Google kaart inbedden in een blogbericht of webpagina (mogelijkheid 2), zie voorbeelden Google maps hierboven.

In dit bericht wordt gekozen voor het inbedden van mijn Google maps in een blogbericht of pagina, zodat de kaart zichtbaar is in het bericht of op de pagina. (mogelijkheid 2 – zie voorbeelden Google maps hierboven)

Plaats de cursor in het 2de veld onder HTML in website plakken en selecteer en kopieer de volledige HTML code. Deze code begint met <iframe
of
duid het HTML veld onder HTML in website plakken aan en druk vervolgens op “Deze kaart aanpassen en als voorbeeld weergeven“. U krijgt dan de mogelijkheid, de kaart volledig naar uw wensen aan te passen.

Bij de optie: “Deze kaart aanpassen en als voorbeeld weergeven” heeft u de keuze uit 4 kaartformaten, klik een bolletje bij het gewenste formaat of geef zelf de door u gewenste breedte en hoogte van de kaart op.

Net zoals hierboven reeds beschreven kan u de beelden in de kaart vergroten, verkleinen en verslepen tot u precies bekomt wat u wilt laten zien

Ook het type kaart kan u alsnog wijzigen, hetzij stratenkaart of satellietbeelden. Voor 3D beelden heeft u echter de invoegtoepassing van Google Earth nodig, gratis te downloaden

Is het voorbeeld naar uw wens, selecteer onder de kaart de volledige HTML code, rechtsklik in de geselecteerde HTML code en kies voor Kopieren of gebruik de toetsencombinatie en druk op Ctrl+C (=kopieren)

Ga naar het dashboard in uw blog > Berichten > Nieuw bericht of Pagina’s > Nieuwe pagina
of klik op Alle berichten (Alle pagina’s) > Duid een bestaand bericht aan en klik op Bewerken, om een map aan een bestaand bericht (pagina) toe te voegen.

Duidt rechts bovenaan het tekstvak de HTML editor aan en plak de iframe code in het HTML bronveld.

Schakel niet meteen over naar de Wysiwyg editor, maar klik eerst op Publiceren of Bijwerken of Concept opslaan, afhankelijk van de status van uw bericht (een Nieuw of bestaand bericht of een bericht in concept), zodat de iframe code correct wordt omgezet in een WordPress shortcode.

Na opslaan van het bericht zal u zien dat de iframe code omgezet is in een shortcode

Bij omschakelen naar de Wysiwyg editor, is eveneens de shortcode te zien

Wilt u nadien met behulp van de Wysiwyg editor nog bijkomende tekst boven of onder de shortcode code toevoegen .
Wees voorzichtig dat de shortcode niet aangetast of onderlijnd geraakt.

Als de code onderlijnd geraakt en dus een link in de shortcode binnengeslopen is, werkt de shortcode niet meer en wordt de Google kaart bij het bekijken van de site niet meer weergegeven

Om dit te voorkomen, plaats in de HTML stand eerst een punt,  op de regel juist boven en onder de shortcode, zodat bij overschakelen naar de Wysiwyg editor,  duidelijk te zien is van waar en tot waar u gerust tekst kan toevoegen.

In het Wysiwyg tekstveld wordt de Google map niet weergegeven, in plaats daarvan ziet u de shortcode.
Klik na opslaan van het bericht bovenaan op Bericht tonen of op de Titel van de blog (Site bekijken) om de Google maps te bekijken
.