Alterando as cores do Google Maps com Javascript

Nesse post vou dar um exemplo de como realizar altera��es simples nas cores do Google Maps utilizando sua API. Abaixo est� o c�digo-fonte utilizado para alterar as cores do mapa, das ruas e dos nomes das ruas.

Por Daniel Flores Bastos | @daniellbastos em 11/03/2013 14:44 em Programa��o Pular para coment�rios

Olá pessoal, esse é um post rápido, sem muito lero lero, indo direto ao assunto, que nesse caso é o código-fonte. Como não se trata de um código complexo, deixo a explicação nos comentários do código-fonte, ou em caso de dúvida é só deixar suas dúvidas nos comentários.

Nesse post vou dar um exemplo de como realizar alterações simples nas cores do Google Maps utilizando sua API. Veja o resultado:

Alterando as cores do Google Maps com Javascript

Abaixo está o código-fonte utilizado para alterar as cores do mapa, das ruas e dos nomes das ruas.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Customizando o Google Maps</title>    
    <style>
        #google_maps {
            width:  640px;
            height: 400px;
            border: 2px solid #666;
        }
    </style>
</head>
<body>
    <h1>Alterando as cores do Google Maps</h1>
    <div id="google_maps"></div>    

<script src="http://maps.google.com/maps/api/js?sensor=true&async=2"></script>
<script type="text/javascript">
    var directionsDisplay;
    var map;
    
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(-29.686141,-53.806041),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    };    
    map = new google.maps.Map(document.getElementById("google_maps"), myOptions);

    var pink_parks = [
        {
            elementType: "labels.text",            //Cor dos textos do mapa
            stylers: [
              { color: "#333333" }
            ]
        }, {             
            elementType: "labels.text.stroke",     //Cor da Borda dos textos do mapa
            stylers: [
                { visibility:"off" }            //Oculta a Borda
            ] 
        }, {
            "elementType": "geometry.fill",     //Cor do mapa
            "stylers": [
                { "color": "#ff9999" }
            ]
        }, {
            "elementType": "geometry.stroke",    //Cor das Bordas do mapa
            "stylers": [
                { "color": "#558090" }
            ]
        }, {
            "featureType": "road",                 //Cor das Ruas
            "elementType": "geometry.fill",
            "stylers": [
                { "color": "#ededed" }
            ]
        }
    ];
    map.setOptions({styles: pink_parks});
    
    directionsDisplay = new google.maps.DirectionsRenderer();    
    directionsDisplay.setMap(map);
</script>
</body>
</html>