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

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: <img src="https://www.oficinadanet.com.br/imagens/post/10087/gmaps.png" alt="" /> Abaixo está o código-fonte utilizado para alterar as cores do mapa, das ruas e dos nomes das ruas. <code><!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></code> Caso fiquem curiosos, o Google tem um <a rel="nofollow" href="http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html" target="_blank">link</a> que gera o JSON utilizado na customização do mapa.   Arquivo para download do HTML: <a href="https://www.oficinadanet.com.br/imagens/post/10087/arquivo.zip"><img src="https://www.oficinadanet.com.br/imagens/post/10087/botaodownloadoficina.jpg" alt="download" /></a>

Mais sobre: javascript, google maps, api

Share Tweet

DESTAQUES