Mapas personalizados con Google Maps (API v3)
Las versión 3 de la API de Google Maps permite personalizar los estilos de presentación de los mapas.
Para ello podemos modificar la propiedad .styles del objeto MapOptions del mapa o crear nuestro propio StyledMapType y aplicarselo al mapa.
La sintaxis es sencilla, podemos generar un JSON con las opciones y aplicarselas al mapa. Por ejemplo para modificar el color del agua, se utiliza el objeto:
|
1 2 3 4 5 6 |
{ "featureType": "water", "stylers": [ { "color": "#A2D4E7" } ] } |
Además disponemos de un Wizard donde podemos ir modificando los elementos del mapa y después copiar el JSON que tenemos que aplicar al mapa.
Un ejemplo de personalización de mapa utilizando un StyledMapType sería este:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
function initialize(){ /* Creamos un mapa con la opción mapTypeId igual al nombre del conjunto de estilos que vamos a aplicar al mapa */ var mapOptions = { maxZoom:5, minZoom:2, zoom: 3, center: new google.maps.LatLng(33.09235493054249, 9.031823420263905), mapTypeControl: false, mapTypeId: 'mi-estilo' }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); /* Estas son las opciones sacadas del Wizard de Google */ var featureOpts = [ { "featureType": "administrative", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "water", "stylers": [ { "color": "#A2D4E7" } ] },{ "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [ { "visibility": "on" }, { "color": "#F34600" } ] },{ "featureType": "landscape", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#A7A4A0" } ] },{ "featureType": "road", "stylers": [ { "visibility": "off" } ] } ]; /* Con ellas creamos un StyleMapType, con el nombre que hemos utilizado a la hora de crear el mapa en el parámetro mapTypeId */ var styledMapOptions = { name: 'Custom Style' }; var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); /* Definimos el estilo del mapa como el nuestro */ map.mapTypes.set("mi-estilo", customMapType); } google.maps.event.addDomListener(window, 'load', initialize); |