Google Maps kaart op website plaatsen in 5 stappen

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

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.

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 2015
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!

Comments

  1. Liza Heykoop says:

    Beste Gerben, bedankt voor je tips!

    Ik zou de kaart graag op onze website plaatsen om de projecten die wij in het buitenland hebben te laten zien. Het is me gelukt om de map te maken met alle locaties erop, maar ik zou graag in de beschrijving iets vertellen over het project. Nu lukt het me niet om in de beschrijving opsommingstekens te gebruiken en dat is in dit geval, met veel cijfers en data, wel cruciaal. Weet jij of het überhaupt mogelijk is? Of heb je een tip voor een programma waarbij dat wel kan?

    Alvast hartelijk dank!

  2. Bedankt. Werkt perfect! En het scheelt dat je niet met plug-ins op je website hoeft te werken.

  3. Agnes van der Graaf says:

    Hallo Gerben,

    Een duidelijke video, waarmee ijsnel een kaart op de website kan krijgen. Ik loop alleen tegen een cruciaal probleem aan. Als ik m’n xlsx of cvs bestand upload (beiden omgezet van numbers) worden de kopjes niet herkent en kan ik ze dus ook niet aanvinken. Heb jij enig idee hoe dit komt en wat ik er aan kan doen?

    warme groet
    Agnes

    • Mijn tip is om Engelse koppen te kiezen zoals Name of Adress, probeer gewoon nieuwe koppen of maak simpeler bestand met minder kolommen. Of Google eens dit: Google Maps not read CSV help

      • Agnes van der Graaf says:

        Dank je voor je reactie Gerben. Uiteindelijk ben ik wat gaan rommelen met het omzetten van het bestand en nu is het gelukt.

  4. Haye Talsma says:

    Hallo Gerben,

    Goede video, heeft mij goed geholpen om een kaart te maken, maar,
    Als ik de Iframe link plaats op mijn website dan krijg ik er van Google aan de bovenkant een zwarte informatie balk er bij.
    In die balk staat o.a. een link naar mijn Google account. Die balk wil ik natuurlijk niet op de site van een klant van mij.
    Hoe krijg ik dat voor elkaar.(ik werk met Dreamweaver)
    Met vriendelijke groet
    Haye Talsma

    • Helaas is dit niet te vermijden. Google Maps is een gratis dienst en de zwarte balk of de knop inloggen wordt getoond. Ik heb nu, anno 2017, een alternatieve dienst gevonden om een kaart te maken. En dat is Local Focus. Zie op het einde van mijn post. Gerben.

  5. Charlotte says:

    HELEMAAL geweldig! Dankjewel voor deze heldere uitleg!

Trackbacks

  1. […] Google Maps kaart op website plaatsen in 5 stappen […]

  2. […] foto’s vinden Geo-kaart maken Woordenwolk […]

  3. […] maken Gratis WP foto’s vinden Geo-kaart embedden Woordenwolk […]

  4. […] maken Gratis foto’s vinden Geo-kaart maken Woordenwolk […]

  5. […] maken Gratis foto’s vinden Geo-kaart maken Woordenwolk […]

  6. […] maken Gratis foto’s vinden Geo-kaart maken Woordenwolk […]

  7. […] maken Gratis foto’s vinden Geo-kaart maken Woordenwolk […]

En ja, reageer gerust

*