Oficina da Net Logo

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 | @daniellbastos Programação

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>

 

Alterando as cores do Google Maps

Caso fiquem curiosos, o Google tem um link que gera o JSON utilizado na customização do mapa.

 

Arquivo para download do HTML:
Alterando as cores do Google Maps com Javascript

MAIS SOBRE: #javascript  #google maps  #api  #tutorial
Comentários
Carregar comentários