Google Maps op website plaatsen, hoe gaat dat?

Bekijk mijn video uitleg over Locaties aanmaken in Google Maps (al 15.000 keer bekeken). De video opent in een aparte tab, zodat je deze uitleg er naast kan houden. Ook noem ik een alternatief voor Google Maps als je een tool zoekt voor een geo kaart in huisstijl. Leer nu in vijf stappen over de Google Maps op website embed.




google-maps-kaart-op-website-plaatsen
Een geografische kaart toont de locaties die jij kiest in één plattegrond. In deze WordPress blog lees je hoe een geo-kaart maken in zijn werk gaat als je daarbij Excel gebruikt om adressen in te voeren binnen Google maps. Google Maps biedt je gratis mogelijkheden, ongeacht hoeveel webbezoek gebruik maakt van je digitale kaart.

Stappen Google Maps embedden

In deze uitleg kom je langs deze vijf stappen, zie ook video op deze pagina!

1. Excel werkmap maken met adressen, Engelstalige kop per kolom
2. Nieuwe Kaart maken binnen Google Maps
3. Google Maps kaart toevoegen na eigen grafisch opmaak
4. Google Maps kaart openbaar maken
5. Google Maps kaart op website plaatsen
(6.) Adressen toevoegen of verwijderen / Locaties aanpassen

Tip: meer uitleg over WordPress in 10 video’s

Google maps op website plaatsen met locaties (5 minuten)

Bekijk de video en lees de vijf stappen.

In dit voorbeeld importeer ik adressen uit een gewone Excel werkmap, binnen de Google Maps Engine importeer ik deze locaties om de Google Maps kaart te maken die ik daarna op ‘openbaar’ zet en deel.





Google maps kaart op website in 5 stappen

1. Excel werkmap met adressen

Google Maps Engine kaart maken startschermAls je verschillende locaties hebt, is het handig om een lijst te hebben die je kunt aanpassen. Je kunt je werkblad bijvoorbeeld met deze kolommen inrichten:

  • Title
  • Name
  • Address
  • Postal Code
  • City
  • Description

2. Nieuwe Kaart maken binnen Google Maps

Gebruik de Google Maps Engine als gratis tool. Ga naar: http://mapsengine.google.com/map. Ga naar “mijn kaarten, nieuwe kaart”. Je kunt via “importeren” de Excel werkmap inladen, maar je kunt ook locaties intypen in de zoekbalk. En het gevonden adres dan “toevoegen aan de kaart”, dat kan na 1 x klikken op de ‘speldeknop’.



3. Google Maps kaart toevoegen na eigen grafisch opmaak

Zoals in de video genoemd, zijn er diverse opmaak opties. Je kunt routebeschrijvingen aan de kaart toevoegen, toeristische gebieden, omleidingen laten zien e.d. Ook kun je lagen toevoegen die je ‘aan’ of ‘uit’ kunt zetten. Met de +/- symbolen rechtonder in beeld kun je in- en uitzoomen. Een tip: zet je ‘Title’ attribuut of label op ‘aan’, zodat bij alle locaties een naam staat. Maak de juiste uitsnede, nog voor embedden.

Nieuwsbrief gerbengvandijk inschrijven blog over WordPress en webredactie

4. Google Maps kaart openbaar maken

Via de groene knop, geheel rechts, die ‘delen’ heet, kun je direct naar je instellingen van de Google Maps kaart. Zet deze op openbaar, zodat je ook kunt embedden. Zonder deze instelling kun je de kaart alleen delen via een link (per mail, Twitter en Facebook).



5. Google Maps kaart op website plaatsen

embed-icon-Google-MapsVia het ‘icoontje dat op een map lijkt’, kun je de iframe code verkrijgen om je Google Maps kaart te embedden op je website. Je knipt en plakt deze code in je WordPress Post of Pagina. (Zet de editor eerst op “tekst” modus en plak de iframe code niet in de Wysiwyg modus, want dan zie je de code alsof het tekst is en werkt de functie niet.)

Klaar, publiceer je pagina opnieuw (‘Bijwerken’) met daarin de Google maps embed. Het handige van het Excel bestand is dat je adressen kan aanpassen en zo weer een nieuwe kaart hebt. Veel succes!

Ps. Tip: Zet adressen / locaties ook onder je kaart als extra manier om te raadplegen. (=webrichtlijnen)

6. Adressen toevoegen of verwijderen van bestaande Google Maps kaart

Ik ga in op hoe je locaties kunt toevoegen of verwijderen, of hoe je dat doet voor kolomnamen van je Excel.

Adressen aanpassen Google Maps

Na Google Maps op website plaatsen, is het mogelijk om de adressen, of locaties, aan te passen door het Excel werkblad via Excel te openen. Je kunt voor of na een locatie velden invoegen of verwijderen. Log in op Google maps, ga naar ‘Mijn plaatsen’, dan naar ‘Mijn kaarten’, navigeer vervolgens langs deze schermen:

Google-maps-locaties-toevoegen

En:

Google-maps-locaties-toevoegen-2

En:

Google-maps-adres-toevoegen-bestaande-kaart-of-adres-verwijderen

Je kunt dus adressen / locaties toevoegen of verwijderen aan een bestaande Google Maps kaart.

Excel koppen aanpassen Google Maps

Je kunt de Engelse koppen van je tabel helaas niet meer aanpassen, dan moet je weer een Excel uploaden met Nederlandse Kolomnamen. Google maps herkent de Nederlandse kolomtitels niet, maar je kunt wel de lege suggesties aanvinken als je de volgorde weet van de kolomnamen die je wilt invoeren (Google Maps leest je tabel van links naar rechts, dus de kolomnamen staan ook zo opgesomd). Je vinkt eerst de kolomnamen aan die de plek aangeven (bijv. adres en postcode en plaatsnaam). En in tweede vraagronde de kolom voor de juiste locatietitel voor elk plekje op de geo kaart.

Alternatief Google Maps: Local Focus

Een alternatief voor Google Maps is Local Focus, zie hun voorbeeld van een design geo-kaart in huisstijl. Local Focus is een Nederlandse, commerciële dienst met een instap van 60 Euro per maand. Maar is gratis te proberen voor websites met relatief weinig bezoek. Mits je pagina waarop de geo kaart staat onder de 1000 views per maand blijft, kun je de dienst gratis blijven gebruiken en nieuwe geo kaarten maken. Je kunt alleen geen nieuwe adreskaarten meer maken, vanaf het moment dat één van de kaarten meer dan 1000 bezoekers per maand krijgt. Dus voor veel WordPress website eigenaren een prima tool om mee te werken. Wel moet je adressen uit je Excel eerst aanvullen met hoogte- en breedtegraden. Via deze tool: https://geocode.localfocus.nl/ kun je adressen omzetten naar coördinaten. Dan wordt dit adres: Deken Heinenstraat 9, Bunnik, de coördinaat: 5.1973753 52.0648161 (met punten of met komma’s; kun je kiezen).



Tot slot: WordPress + beeldbewerking literatuur tips:

Boektip: Photoshop CS6
Eigen foto’s en banners maken? Koop betaalbaar Photoshop CS6 boek (=tip)

Boektip: WordPress Handleiding
Meer kunnen met WordPress? Bestel Handboek WordPress 2015

Boektip: Website voor eigen bedrijf
WordPress website voor je eigen bedrijf maken? Zie mijn boektip (Bol.com)

Boektip Toptaken Gerry McGovern
Koop het enige Nederlandstalig boek van Gerry McGovern (2009), nog steeds gangbaar!

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *