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