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
<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>

SHARE
+ Tutoriais
Assine a nossa newsletter
Comentários