Via een style generator voor Google Maps heb mijn kaart kleuren etc zoals ik ze hebben wil.
De output van deze generator is de Json codering.
Op het internet kwam ik dit tegen:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Json:
[{"featureType":"water","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"saturation":0},{"lightness":0}]},
{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"on"},{"hue":"#ffffff"},{"saturation":-100},{"lightness":99}]},
{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"},{"saturation":-100},{"lightness":100}]},
{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"on"},{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31}]},
{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#000000"},{"lightness":-11}]},
{"featureType":"road.local","elementType":"geometry","stylers":[{"visibility":"on"},{"hue":"#e9ebed"},{"lightness":-2}]},
{"featureType":"transit","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":10},{"lightness":69}]},
{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"hue":"#2c2e33"},{"saturation":7},{"lightness":19}]},
{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"},{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31}]},
{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"simplified"},{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":-2}]}]
Hoe krijg ik deze style gekoppeld met de bovenstaande code?
Kan dat met een variabele?
Bijvoorbeeld:
var myStyle = {
///// hier de json codering
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp,myStyle);
Moet ik dan nog iets toevoegen zodat hij weet dat het om joon code gaat?
