Google map stijlen

Het is tegenwoordig vrij normaal om een Google map op je website te hebben om zo aan je bezoekers te laten zien waar je bedrijf zit. Omdat dit normaal is heb je zeer veel maps die op elkaar lijken. Immers, iedereen gebruikt dezelfde kaart. Wanneer je als ontwerper dit niet wilt dan kun je met behulp van CSS en Javascript de kaart je eigen look & feel geven.

Op deze pagina vind je een video waarin je wordt uitgelegd hoe je met de Google Styled Map Wizard kunt werken. Hiermee kun je zeer eenvoudig stijlen aanpassen. Je kunt er daarna voor kiezen om de map statisch op te nemen (via een link) of dat je de styled map middels javascript en CSS in je site opneemt. Die laatste bespreek ik zelf op deze pagina.

 

Opdrachten

Opdracht 1 – via de Google Styled Map Wizard

Style je eigen Google map. Het maakt niet veel uit waar deze naar toe wijst; wellicht het GLR. Style ten minste 5 verschillende onderdelen (zoals bebouwing, groen, wegen etc). Gebruik de Google Styled Map Wizard om dit voor elkaar te krijgen. Voeg je Google map in op een HTML pagina.

 

Opdracht 2 – via Javascript

Style je eigen Google map. Neem een marker op om de exacte plaats aan te wijzen. Het maakt niet veel uit waar deze naar toe wijst; wellicht het GLR. Style ten minste 5 verschillende onderdelen (zoals bebouwing, groen, wegen etc). Gebruik Javascript om dit voor elkaar te krijgen. Voeg je Google map in op een HTML pagina.

 

Video’tje kijken?

In onderstaande video wordt je uitgelegd hoe je de Google Styled Map Wizard kunt gebruiken.

 

Links

Zie http://www.hongkiat.com/blog/google-maps-styles/ voor de originele tutorial.
Zie https://snazzymaps.com/ voor kant-en-klare code waarmee je dit ook kunt doen.

 

Theorie

Op de site van Hongkiat staat een duidelijke tutorial met een demo en een broncode die je kunt downloaden.

Tutorial door Hongkiat

Screenshot van http://www.hongkiat.com/blog/google-maps-styles/

 

Download de broncode en open de HTML. TIP: Oefen eerst even met deze pagina voordat je de map in je eigen project gaat toevoegen!

Het meest in het oog springende zijn een aantal regels Javascript. Regels 8, 9, 72 en 73 mag je verwijderen. Dit zijn verwijzingen naar scripts voor de website van Hongkiat en hebben we niet nodig voor de Google map.

HTML Hongkiat demo

HTML bij de tutorial van Hongkiat over Google Maps

 

De verwijzing naar het stylesheet zul je ter zijner tijd ook moeten aanpassen naar een goede link naar jouw stylesheet.

We gaan eerst even onderaan beginnen:

HTML bij tutorial van Hongkiat over Google maps

HTML bij tutorial van Hongkiat over Google maps

 

In de regels

center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509),
zoom: 16,

kun je de plaats en de vergroting aanpassen. Ik heb het GLR als plek genomen en de zoom laten staan op 16. Een hoger getal toon minder van de omgeving (je zoomt in) en een lager getal toont meer van de omgeving (je zoomt uit).

 

Het GLR heeft als longitude en latitude respectievelijk 51.927604 en 4.478214. Wijzig je code in:

center: new google.maps.LatLng(51.927604, 4.478214),

Let er op dat je de komma aan het eind van de regel laat staan!

 

Upload je bestand en kijk eerst even of het werkt. Als het goed is zie je het GLR op de kaart en is de kaart beige/bruin van kleur. Deze kleuren komen uit het bestand wat je via de website van Hongkiat hebt gedownload.

Het GLR op Google maps

Het GLR op Google maps

 

Nu heb je van alles, maar wat doet het? Het wordt al best duidelijk wanneer je de code even gewoon te lezen, uiteindelijk is het gewoon Engels:

{
featureType: 'water', // set the water color
elementType: 'geometry.fill', // apply the color only to the fill
stylers: [
{ color: '#adc9b8' }
]
}

 

Dit gedeelte stelt de waterkleur in. De kleur #adc9b8 is een groentint welke ik niet mooi vind. Ik wil toch graag blauw water. Dus via Photoshop kies ik 00ccff als kleur. Dit kun je dan aanpassen zodat de code voor water wordt:

{
featureType: 'water', // set the water color
elementType: 'geometry.fill', // apply the color only to the fill
stylers: [
{ color: '#00ccff }
]
}

Op de site van Google developers (https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType) vind je alle Feature Types (de “MapStyleTypeFeatureTypes”) die Google Maps kent, zoals een landscape, een poi (point of interest) etc.

Daar direct onder vind je een overzicht van de bruikbare Element Types (de “MapTypeStyleElementTypes”) , zoals fill, stroke etc. Daar weer onder vind je een overzicht van de Type Stylers (de “MapTypeStylers”) waarbij wordt aangegeven wat je precies kunt aangeven (color, gamma, hue etc). Met die informatie kom je een heel eind mbt het stijlen van jouw kaart.

 

Stylen toevoegen aan de code

Nog 1 ding. Stel dat ik in mijn voorgaande voorbeeld de randen van de grote wegen rood wil laten zijn? Hoe voeg ik dan een FeatureType of ElementType toe? Dit kun je doen door het stukje elementType tot en met de blokhaak ( ] ) te herhalen.

{
 featureType: 'road', // set the road color
 elementType: 'geometry.fill', // apply the color only to the fill
 stylers: [
            { hue: '#d5c18c' },
            { lightness: 14 }
        ],
elementType: 'geometry.stroke',
 stylers:[
 { color: '#ff0000' }
 ]
 }

Let er goed op dat je tussen de {} haken blijft EN dat je achter de laatste blokhaak ] een komma zet voordat je doorgaat. Dit is namelijk een zogeheten array. Arrays kunnen meerdere zaken aan informatie bij zich dragen maar deze informatie moet wel kommagescheiden aangeleverd worden.

 

Een marker plaatsen

Binnen de code die je al hebt zoek je de het einde van de functie:

Insertplek voor marker

Einde van de functie

Plaats VOOR de afsluiting van de functie het volgende script:

var marker = new google.maps.Marker({
position: myLatlng,
title: 'Hello World!'
 });
marker.setMap(map);

 

Zodat het einde van je script er als volgt uitziet:

var marker = new google.maps.Marker({
position: myLatlng,
title: 'Hello World!'
 });
marker.setMap(map);
}
</script>
</head>
<body>

De bekende rode druppel van Google Maps komt er dan te staan. Bij title staat nu nog ‘Hello world’ maar dat kun je aanpassen naar je eigen tekst. De title is de rollover van de marker.

 

Een eigen ikoontje maken

Dit is slechts een kleine aanvulling op de vorige exercitie. Zorg dat je een transparante png hebt, dit is het mooist. Hij moet niet te groot zijn natuurlijk.

Bereid je code uit tot (regel 1 en 4 zijn nieuw):

var image = 'map-icon.png';
var marker = new google.maps.Marker({
position: mijnPositie,
icon:image,
title: 'Grafisch Lyceum Rotterdam'
});

Let ook hier goed op dat je na icon:image niet vergeet om een komma te plaatsen. Zorg er voor dat je het ikoontje ook daadwerkelijk upload, anders laat Google maps niets zien. En klaar ben je.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.