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
<p class="western" style="margin-bottom: 0cm;">Ol&aacute; pessoal, esse &eacute; um post r&aacute;pido, sem muito lero lero, indo direto ao assunto, que nesse caso &eacute; o c&oacute;digo-fonte. Como n&atilde;o se trata de um c&oacute;digo complexo, deixo a explica&ccedil;&atilde;o nos coment&aacute;rios do c&oacute;digo-fonte, ou em caso de d&uacute;vida &eacute; s&oacute; deixar suas d&uacute;vidas nos coment&aacute;rios.</p> <p class="western" style="margin-bottom: 0cm;">Nesse post vou dar um exemplo de como realizar altera&ccedil;&otilde;es simples nas cores do Google Maps utilizando sua API. Veja o resultado:</p> <p class="western" style="margin-bottom: 0cm;"><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/10087/gmaps.png" alt="" /></span></p> <p class="western" style="margin-bottom: 0cm;">Abaixo est&aacute; o c&oacute;digo-fonte utilizado para alterar as cores do mapa, das ruas e dos nomes das ruas.</p> <p><code><!DOCTYPE HTML><br /><html><br /><head><br />    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />    <title>Customizando o Google Maps</title>    <br />    <style><br />        #google_maps {<br />            width:  640px;<br />            height: 400px;<br />            border: 2px solid #666;<br />        }<br />    </style><br /></head><br /><body><br />    <h1>Alterando as cores do Google Maps</h1><br />    <div id="google_maps"></div>    <br /><br /><script src="http://maps.google.com/maps/api/js?sensor=true&async=2"></script><br /><script type="text/javascript"><br />    var directionsDisplay;<br />    var map;<br />    <br />    var myOptions = {<br />        zoom: 15,<br />        center: new google.maps.LatLng(-29.686141,-53.806041),<br />        mapTypeId: google.maps.MapTypeId.ROADMAP,<br />        scrollwheel: false<br />    };    <br />    map = new google.maps.Map(document.getElementById("google_maps"), myOptions);<br /><br />    var pink_parks = [<br />        {<br />            elementType: "labels.text",            //Cor dos textos do mapa<br />            stylers: [<br />              { color: "#333333" }<br />            ]<br />        }, {             <br />            elementType: "labels.text.stroke",     //Cor da Borda dos textos do mapa<br />            stylers: [<br />                { visibility:"off" }            //Oculta a Borda<br />            ] <br />        }, {<br />            "elementType": "geometry.fill",     //Cor do mapa<br />            "stylers": [<br />                { "color": "#ff9999" }<br />            ]<br />        }, {<br />            "elementType": "geometry.stroke",    //Cor das Bordas do mapa<br />            "stylers": [<br />                { "color": "#558090" }<br />            ]<br />        }, {<br />            "featureType": "road",                 //Cor das Ruas<br />            "elementType": "geometry.fill",<br />            "stylers": [<br />                { "color": "#ededed" }<br />            ]<br />        }<br />    ];<br />    map.setOptions({styles: pink_parks});<br />    <br />    directionsDisplay = new google.maps.DirectionsRenderer();    <br />    directionsDisplay.setMap(map);<br /></script><br /></body><br /></html></code></p> <p class="western" style="margin-bottom: 0cm;">Caso fiquem curiosos, o Google tem um <strong><a rel="nofollow" href="http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html" target="_blank">link</a></strong> que gera o JSON utilizado na customiza&ccedil;&atilde;o do mapa.</p> <p class="western" style="margin-bottom: 0cm;">&nbsp;</p> <p style="text-align: center;"><strong>Arquivo para download do HTML:</strong><br /><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></p>

MAIS SOBRE javascript google maps api
SHARE
Últimas em Javascript
+ vistos em Programação
O QUE LER EM SEGUIDA
Comentários