Kaart maken met Google Maps en embedden in 10 stappen

Een kaart maken met Google Maps is handig om een adressenlijst visueel weer te geven. Er is dan snel te zien hoe de spreiding van locaties is. Locaties kunnen in categorieen worden onderverdeeld zodat ook snel te zien is wat de dichtstbijzijnde locatie is. In deze how-to wordt in simpele stappen met screenshots uitgelegd hoe een kaart met Google Maps gemaakt kan worden. 

Er zijn heel wat plugins te vinden die hierbij helpen, mijn ervaring is dat deze de performance van een website kunnen vertragen. Het is daarom aan te raden om de kaart op een andere locatie te laten hosten en de aangepaste kaart in te sluiten. Google Maps is ideaal hiervoor.

Voordat we beginnen is er een Google Account nodig. Deze wordt gebruikt voor het kunnen maken van een kaart en eventueel ook voor het aanleggen van een bestand met locaties in Google Drive. In deze tutorial leg ik uit hoe de stemlokalen in Hilversum op de kaart kunnen worden gezet. Hierbij wil ik snel kunnen zien of een locatie ook rolstoeltoegankelijk is.

1) Bestand met gegevens

Er is een bestand nodig met locaties. Dit kan een CSV- of Excel-bestand zijn of het kan worden gemaakt met Google Drive-spreadsheet (Google Docs). Een aantal gegevens is nodig om locaties te kunnen bepalen op de kaarten van Google Maps.

  • Een naam om de locatie een naam te geven,
  • Het adres
  • Eventueel de postcode
  • De plaats

Coördinaten zijn ook mogelijk in plaats van het adres. Hierdoor is het nog gedetailleerder. Voor deze kaart ga ik de stemlokalen in Hilversum op de kaart zetten en daarbij wil ik ook snel kunnen zien welke stembureaus rolstoeltoegankelijk zijn.

Google Maps2) Naar Google Maps

Ga naar maps.google.com. Het scherm ziet dan uit als hieronder. Klik in de zoekbalk, als er is ingelogd verschijnt er een scherm met “Mijn aangepaste kaarten”

 

3) Inloggen met Google-account

Google maps - mijn aangepaste kaartenAls “Mijn aangepaste kaarten” niet verschijnt, log dan in met je Google-Account. Ga naar maps.google.com en ga weer naar de zoekbalk. “Mijn aangepaste kaarten” is dan wel te zien. Klik erop.

 


 

Google Maps aangepaste kaart makenVervolgens is er een overzicht te zien van alle aangepaste kaarten of kan er worden gekozen om een aangepaste kaart te maken. Klik op “maken”.

 

4) Data importeren

Er is nu een naamloze kaart aangemaakt. De data met locaties moet nu worden geïmporteerd.

Google Maps - aangepaste kaart maken

Google Maps - aangepaste kaart maken 2

Klik op ‘importeren’ in het menu aan de linkerkant. Hiermee wordt de informatie uit het spreadsheetbestand gekoppeld aan de locaties op de kaart.

Het is ook mogelijk om gegevens op een andere manier op de kaart te zetten, bijvoorbeeld handmatig plaatsmarkeringen neerzetten of een route tekenen.

 


Google Maps - aangepaste kaart maken - een bestand kiezen om te uploadenEr verschijnt een scherm waar een bestand kan worden gekozen om te uploaden. Het bestand dat ik gebruik is opgeslagen op mijn schijf in Google Drive.

Uiteraard is het ook mogelijk om een CSV- of XLSX-bestand te uploaden. Klik dan op ‘Een bestand vanaf uw computer selecteren’
Kies het juiste bestand en klik op selecteren.


Google Maps - aangepaste kaart maken.png - toegang tot DriveDe toegang tot Google Drive wordt aangevraagd en er wordt aangegeven dat pop-ups moeten zijn ingeschakeld. Deze melding verschijnt uiteraard alleen als er een bestand van Google Drive nodig is. Bij het uploaden van een bestand vanaf je eigen computer is deze melding niet te zien.


Google Maps - aangepaste kaart maken - Kolommen kiezen om plaatsen te bepalenNadat het bestand is geüpload moet worden aangeven welke kolommen nodig zijn om de plaatsmarkeringen te positioneren.
In mijn bestand zijn dat de kolommen ‘adres’ en ‘plaats’. Er kunnen meerdere kolommen worden gecombineerd. Klik daarna op ‘Doorgaan’.

 


Google Maps - aangepaste kaart maken.png - kolom met titels kiezenEr verschijnt vervolgens een scherm waarin de kolom met titels voor de plaatsmarkeringen kan worden gekozen. In mijn bestand heet deze kolom ‘naam’.
Er kan slechts een kolom hiervoor worden gebruikt. Als er informatie uit meerdere kolommen voor de titel moet worden gebruikt, moet het gegevensbestand worden aangepast en moet de informatie uit meerdere kolommen in een kolom worden gezet.

Klik vervolgens op voltooien.

5) Naam wijzigen

Google Maps - aangepaste kaart maken - titel aanpassenDe naam van de kaart wijzigen we. ‘Naamloze kaart’ wordt ‘Stemlokalen in Hilversum’. Dit doe je door op de balk met ‘Naamloze kaart’ te klikken. Er verschijnt vervolgens een ander scherm(pje)

In dit scherm kan de titel en de beschrijving van de kaart worden bewerkt. Deze beschrijving is belangrijk om je kaart te kunnen terugvinden. Ook worden deze gegevens gebruikt als de kaart wordt gepubliceerd.

6) Gegevens aanvullen en controleren

Google Maps - aangepaste kaart maken - stijl gegevens labelsDe naam is gewijzigd en de data is toegevoegd. Naast ‘Stemlokalen in Hilversum’ is het bestand ‘Stemlokalen Hilversum 22 mei 2014’ geïmporteerd. Er zijn drie tabbladen te zien:

  1. Stijl
  2. Gegevens
  3. Labels

Onder gegevens kan er gecontroleerd worden of de gegevens kloppen en kan het bestand nog worden aangevuld. Er is geen koppeling met het originele bestand, dus een wijziging in de geïmporteerde gegevens veranderen niets in het originele bestand.

Google Maps - aangepaste kaart maken - gegevens controlerenAls er op gegevens wordt geklikt verschijnt er een spreadsheet met de gegevens. In de vierde kolom staat de categorie die zo gebruikt gaat worden voor een goed zichtbare plaatsmarketing.
Elke cel kan worden aangepast. Als er bijvoorbeeld een tikfout inzit kan dit makkelijk worden gecorrigeerd.


7) Labels toevoegen

Google Maps - aangepaste kaart maken.png - labels aanpassenDe kolom met categorieën (in dit geval rolstoeltoegankelijk) kan worden aangeduid met labels op de kaart. Achter elk plaatssymbool op de kaart wordt dan de tekst uit de gekozen kolom gezet.
Klik hiervoor op ‘labels’ en kies voor de betreffende kolom.

Hieronder is de kaart te zien met de labels. Bij de stemlokalen waar niets achter staat is niets te zien, de rolstoeltoegankelijke locaties zijn aangegeven met het label ‘rolstoeltoegankelijk’.

Er is nu een overzicht van de stemlokalen in Hilversum en daarbij is zelfs te zien welke rolstoeltoegankelijk zijn. Het klinkt goed, maar met de labels ziet het er niet zo overzichtelijk uit als gehoopt. Er staan veel locaties op een klein oppervlak zijn. De labels overschrijven daardoor andere locaties. We kunnen dit oplossen door per categorie een apart pictogram te gebruiken.

Google Maps - aangepaste kaart maken - labels op de kaart

8) Pictogram per categorie toevoegen

Google Maps - aangepaste kaart maken - stijl per categorieDe weergave van de locaties gaan we zo aanpassen dat er voor de rolstoeltoegankelijke locaties een symbool van een rolstoel wordt gebruikt.  In het menu kiezen we voor ‘Stijl’ en vervolgens zoeken we daar de juiste kolom op. In dit geval is dat dezelfde als bij de labels, namelijk ‘Rolstoeltoegankelijk’.

Er verschijnen vervolgens twee verschillende pictogrammen. Het ene pictogram geeft aan dat het een stembureau is, het andere geeft aan dat het een rolstoeltoegankelijk stembureau is.

Op onderstaande kaart is dit te zien. De blauw gemarkeerde plaatsmarkeringen zijn de stembureaus die rolstoeltoegankelijk zijn. Toch is dit zonder legenda niet in een oogopslag te zien. We kunnen het pictogram aanpassen en in plaats van de puntige aanwijsdruppel een rolstoelsymbool gebruiken.

Google Maps - aangepaste kaart maken - stijl per categorie - standaard labelsGoogle Maps, pictogram aanpassen

Door achter de categorie voor het emmertje met verf te kiezen kan er een ander pictogramkleur, pictogramvorm of ander pictogram worden gekozen om locaties aan te geven.

Vervolgens verschijnt dit scherm. Door op ‘Meer pictogrammen’ te klikken ga je naar de pictorgrammenbibliotheek.

Google Maps - aangepaste kaart maken - pictogrammen kiezen

Google Maps - aangepaste kaart maken - PictogrammenmenuIn de pictogrammenbibliotheek staat een aantal pictogrammen. De collectie is tegen betaling uit te breiden. In eerste instantie voldoet het huidige aanbod. De rolstoel is gecategoriseerd onder ‘Faciliteiten en services’ en is snel gevonden.

Klik op de rolstoel.

Klik op OK, en de rolstoelen staan op de kaart.

Ondertussen heb ik ook kleur van het andere pictogram aangepast naar blauw. Het resultaat is onderstaande kaart.

 

Op onderstaande kaart zijn nu alle stemlokalen in Hilversum te zien. Zelfs zonder legenda te lezen is het nu duidelijk welke stembureaus rolstoeltoegankelijk zijn.

Google Maps - aangepaste kaart maken - kaart af

9) Delen

Google Maps - aangepaste kaart delen - Knop delenDe kaart kan op verschillende manieren worden gedeeld. Klik hiervoor op de groene knop ‘delen’ die rechtsbovenaan het scherm staat.

Google Maps - aangepaste kaart delenDe link om te delen is nu zichtbaar. Alleen zal niet iedereen die link kunnen gebruiken. Hiervoor moet eerst nog de toegang worden aangepast.
Klik onder ‘Mensen met toegang’ op ‘Wijzigen…’

 


 

Google Maps - aangepaste kaart delen - bewerken of weergevenVervolgens verschijnen de opties voor het delen. Deze kaart maken we openbaar toegankelijk en daarbij kiezen we ervoor dat de kaart wordt weergegeven.
De andere optie ‘mag bewerken’ betekent dat bij openbare instellingen iedereen de kaart kan aanpassen. Als er een kaart wordt gemaakt, waarbij iedereen data mag toevoegen kan dit bijvoorbeeld gebruikt worden.

 


Google Maps - aangepaste kaart delen - openbaar op het webKlik op ‘opslaan’ en er is te zien dat de kaart openbaar op het web staat, iedereen op internet kan de kaart zoeken en weergeven. En bij zoeken is het dan weer interessant om te weten dat de titel en beschrijving die bij stap vijf zijn uitgelegd als trefwoorden functioneren.

 

10) Embedden op WordPress-site

Het delen kan via mail, Google+, Facebook, Twitter en via een eigen website. Klik linksboven in op het foldersymbool (naast de knop ‘laag toevoegen’) en kies vervolgens voor ‘Insluiten in mijn site’

Google Maps - aangepaste kaart maken - embedden van de aangepaste kaart

Google Maps - aangepaste kaart delen -embedcode iframeEr verschijnt een scherm met een html-code die gekopieerd moet worden. Eventueel kan de breedte en de hoogte worden aangepast.

Kopieer de code, ga naar je website en maak een nieuw bericht. Dit werkt op een WordPress-website.

Ga naar de tekst-editor en kopieer de code in het bericht.

Google Maps - aangepaste kaart delen - embedcode in bericht

Klik vervolgens op de visual-editor en er is een grijs blok verschenen. Dit is de kaart in de edit-mode. Door nu de preview aan te klikken kan er worden gekeken hoe de kaart is ingesloten op je website.

Google Maps - aangepaste kaart delen - embedcode in bericht in visual mode

Resultaat: Aangepaste kaart op je eigen website

Hieronder staat het resultaat van het insluiten van de kaart in de preview. Bedenk een titel en schrijf er nog een bericht bij en klik op ‘publish’ of ‘publiceren’.
Hier is de kaart met Stemlokalen in Hilversum voor Hilversum voor de Europese verkiezingen van 22 mei gepubliceerd. Google Maps - aangepaste kaart delen - previewOp de kaart is rechtsonderaan de melding te zien dat deze voor niet-commercieel gebruik is. Het aantal vertoningen van de kaart wordt daarom beperkt tot 2500 per dag.

Succes met het maken van je eigen kaarten. Ik ben benieuwd naar jullie kaarten.

 

Leave a Reply

%d bloggers like this: