Mapas de Google personalizados

Custom Google MapLos mapas de Google (Google maps) ofrecen multitud de opciones para personalizar su aspecto (colores, información que se representa, tipo de vista, nivel de zoom…). Es especialmente interesante utilizar estas opciones de personalización cuando necesitamos crear un mapa para mostrar en nuestro blog o sitio web. De forma que podamos darle un estilo que se corresponda al de nuestro sitio, o para destacar la información que queremos representar en el mapa.
En este artículo podéis encontrar varias herramientas que facilitan esta personalización.

Snazzy MapsSnazzy maps
Es un buen sitio para comenzar a explorar las posibilidades de personalización de los mapas de Google. En Snazzy maps podéis encontrar una galería de diferentes estilos de mapas, creados por otras personas. Si encontráis un estilo de mapa que os gusta, podéis copiar el código asociado y utilizarlo en vuestra página. También podéis compartir vuestros mapas desde aquí.

evolutedCustom Google Maps style tool (de Evoluted)
Herramienta online que permite cambiar los principales colores de un mapa de una forma sencilla. Si queréis cambiar la dirección que se muestra en el mapa, podéis obtener la latitud y longitud aquí.
Una vez que tenéis las coordenadas, tenéis que modificar la línea (el primer número es la latitud y el segundo la longitud):
var latlong = new google.maps.LatLng(53.385873, -1.471471);

Google Maps LogoStyled Maps Wizard (de Google)
Herramienta creada por el propio Google, con muchas opciones de personalización de mapas. A diferencia de la anterior, es posible especificar la dirección que queremos mostrar en el mapa, y exportar de forma estática el mapa creado (como imagen).

A continuación podéis ver un ejemplo completo del código que es necesario utilizar para insertar un mapa en vuestro sitio. Como podéis ver, hay algunas líneas de código adicionales a las que os generan las herramientas anteriores:

<!-- Elemento contenedor del mapa -->
        <div id="map"></div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

        <script type="text/javascript">
            google.maps.event.addDomListener(window, 'load', init);

            function init() {
                var mapOptions = {
                    zoom: 11,
                    center: new google.maps.LatLng(40.6700, -73.9400), // New York
                    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#333739"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2ecc71"}]},{"featureType":"poi","stylers":[{"color":"#2ecc71"},{"lightness":-7}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#2ecc71"},{"lightness":-28}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#2ecc71"},{"visibility":"on"},{"lightness":-15}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#2ecc71"},{"lightness":-18}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#2ecc71"},{"lightness":-34}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#333739"},{"weight":0.8}]},{"featureType":"poi.park","stylers":[{"color":"#2ecc71"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#333739"},{"weight":0.3},{"lightness":10}]}]
                };

                var mapElement = document.getElementById('map');

                var map = new google.maps.Map(mapElement, mapOptions);
            }
        </script>

Deja un comentario

Desarrollado por Sociable!