{"id":1037,"date":"2014-01-23T04:28:13","date_gmt":"2014-01-23T04:28:13","guid":{"rendered":"http:\/\/www.abrima.com\/blog\/?p=1037"},"modified":"2014-01-23T04:28:13","modified_gmt":"2014-01-23T04:28:13","slug":"herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps","status":"publish","type":"post","link":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/","title":{"rendered":"Herramientas para crear estilos personalizados para mapas de Google Maps"},"content":{"rendered":"

Si alguna vez nos hemos preguntado si hay alg\u00fan modo de personalizar los estilos de los mapas de Google Maps, la respuesta la tenemos en la relaci\u00f3n de servicios\u00a0que nos presenta Google Maps Man\u00eda<\/a>, una serie de opciones que nos permitir\u00e1n jugar con los estilos de los mapas, permiti\u00e9ndonos tanto crear los nuestros propios como elegir estilos ya creados por otros usuarios y donde simplemente pasamos a escogerlos para usarlos nosotros mismos.<\/p>\n

\"MapStyler\"<\/p>\n

La primera opci\u00f3n se llama\u00a0Map Styler<\/a>, y b\u00e1sicamente partiremos de la base est\u00e1ndar de los mapas de Google Maps para ir incorporando y configurando diferentes elementos encima que encontraremos de manera clasificada en la barra lateral que tenemos a la izquierda de la pantalla a trav\u00e9s del propio asistente. Esta herramienta nos mostrar\u00e1 una previsualizaci\u00f3n simplemente al poner el cursor encima de cada elemento.<\/p>\n

Adem\u00e1s, contamos con la opci\u00f3n\u00a0Showcase<\/em>\u00a0donde tenemos los estilos creados por otros usuarios, sobre los cuales nos podr\u00eda interesar cualquiera de ellos, por lo cual simplemente podemos presionar sobre el t\u00edtulo del estilo que nos interesa para ir a la p\u00e1gina correspondiente y escoger el c\u00f3digo que nos ofrecen para aplicarlo al estilo de nuestros propios mapas.<\/p>\n

\"Snazzy<\/p>\n

Pasamos ahora a\u00a0Snazzy Maps<\/a>, el cual b\u00e1sicamente es un repositorio de esquemas de color para mapas donde tan s\u00f3lo tenemos que navegar entre las opciones m\u00e1s populares o las m\u00e1s recientes pudiendo aplicar una serie de filtros. Esto nos evita tener que realizar nuestras propias configuraciones, donde simplemente tenemos que elegir aquellas opciones que m\u00e1s nos gusten, en el que una vez encontradas, nos iremos dentro de sus p\u00e1ginas para obtener los c\u00f3digos e incluso descargarnos ejemplos. Si somos desarrolladores de estilos, la misma plataforma nos permite subir nuestros propios esquemas.<\/p>\n

\"Flat<\/p>\n

Flat UI Maps<\/a>\u00a0es el asistente de creaci\u00f3n de estilos para mapas de Google Maps de Designmodo donde simplemente podemos crear y experimentar con nuestros propios estilos a trav\u00e9s de su propio framework. La propia plataforma nos ofrece una serie de elementos mediante sus correspondientes men\u00fas desplegables sobre los cuales podemos establecer nuestras propias personalizaciones. Una vez hayamos acabado con nuestros propios estilos, podemos obtener los c\u00f3digos para incluirlos en nuestros mapas. Personalmente esta herramienta no me ha llegado a cargar.<\/p>\n

\"Think<\/p>\n

Custom Google Maps Style Tool<\/a>, perteneciente a Think Tank, es otra herramienta de personalizaci\u00f3n de estilos de mapas en la cual tenemos una serie de controles de color para cada elemento que nos permite configurar donde tan s\u00f3lo tenemos que realizar dichos ajustes, obteniendo los valores en hexadecimal de los colores obtenidos, aunque tambi\u00e9n podemos modificar dichos valores directamente. Al final, tambi\u00e9n tenemos los c\u00f3digos que podemos escoger para aplicar a nuestros mapas.<\/p>\n

\"Google<\/p>\n

Google Maps Colorizr<\/a>\u00a0tambi\u00e9n es otro asistente que nos permite modificar los colores de los diferentes elementos, aunque nos lo presenta con una estructura distinta, m\u00e1s compacta y ordenada que la herramienta anterior. Tan s\u00f3lo tenemos que a\u00f1adir cada elemento de manera personalizada y definir su configuraci\u00f3n, aunque no tenemos una funci\u00f3n que nos permita escoger el color, de manera que tenemos que buscarnos la vida para indicar los valores hexadecimales de los colores que necesitamos. La misma herramienta convierte dichos valores a valores HSL que usa Google Maps. El c\u00f3digo generado lo tenemos a la derecha, y dispone de URL din\u00e1mica, ideal para recabar opiniones de nuestros estilos.<\/p>\n

\"Style<\/p>\n

Y por \u00faltimo tenemos a\u00a0Styled Maps Wizard<\/a>, perteneciente a la misma Google, y que tambi\u00e9n nos permite ajustar los colores de los diferentes elementos y obtener el c\u00f3digo para aplicar en nuestros mapas.<\/p>\n

FUENTE: wwwhatsnew.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Si alguna vez nos hemos preguntado si hay alg\u00fan modo de personalizar los estilos de los mapas de Google Maps, la respuesta la tenemos en […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[],"tags":[],"yoast_head":"\nHerramientas para crear estilos personalizados para mapas de Google Maps - Blog de Tecnolog\u00eda - Abrima<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Herramientas para crear estilos personalizados para mapas de Google Maps - Blog de Tecnolog\u00eda - Abrima\" \/>\n<meta property=\"og:description\" content=\"Si alguna vez nos hemos preguntado si hay alg\u00fan modo de personalizar los estilos de los mapas de Google Maps, la respuesta la tenemos en […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de Tecnolog\u00eda - Abrima\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/abrimawebs\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-23T04:28:13+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2014\/01\/MapStyler.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ana Lucia Marrou\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.abrima.com\/blog\/#organization\",\"name\":\"Abrima\",\"url\":\"https:\/\/www.abrima.com\/blog\/\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/abrima-soluciones-web\/\",\"https:\/\/www.youtube.com\/user\/abrimawebs\",\"https:\/\/www.facebook.com\/abrimawebs\/\",\"https:\/\/twitter.com\/abrimaweb\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.abrima.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.abrima.com\/blog\/wp-content\/uploads\/2018\/03\/abrima-logo.png\",\"contentUrl\":\"https:\/\/www.abrima.com\/blog\/wp-content\/uploads\/2018\/03\/abrima-logo.png\",\"width\":700,\"height\":700,\"caption\":\"Abrima\"},\"image\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.abrima.com\/blog\/#website\",\"url\":\"https:\/\/www.abrima.com\/blog\/\",\"name\":\"Blog de Tecnolog\u00eda - Abrima\",\"description\":\"Blog sobre todo lo relacionado con Cloud, Marketing Digital y Web\",\"publisher\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.abrima.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#primaryimage\",\"url\":\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2014\/01\/MapStyler.jpg\",\"contentUrl\":\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2014\/01\/MapStyler.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#webpage\",\"url\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/\",\"name\":\"Herramientas para crear estilos personalizados para mapas de Google Maps - Blog de Tecnolog\u00eda - Abrima\",\"isPartOf\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#primaryimage\"},\"datePublished\":\"2014-01-23T04:28:13+00:00\",\"dateModified\":\"2014-01-23T04:28:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.abrima.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Herramientas para crear estilos personalizados para mapas de Google Maps\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/#\/schema\/person\/70ccd8d5617e3a3d6d5121086c3bb00f\"},\"headline\":\"Herramientas para crear estilos personalizados para mapas de Google Maps\",\"datePublished\":\"2014-01-23T04:28:13+00:00\",\"dateModified\":\"2014-01-23T04:28:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#webpage\"},\"wordCount\":640,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2014\/01\/MapStyler.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.abrima.com\/blog\/#\/schema\/person\/70ccd8d5617e3a3d6d5121086c3bb00f\",\"name\":\"Ana Lucia Marrou\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.abrima.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/90bc8b721d14c58be266256fd3396265?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/90bc8b721d14c58be266256fd3396265?s=96&d=mm&r=g\",\"caption\":\"Ana Lucia Marrou\"},\"url\":\"https:\/\/www.abrima.com\/blog\/author\/anilu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Herramientas para crear estilos personalizados para mapas de Google Maps - Blog de Tecnolog\u00eda - Abrima","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/","og_locale":"es_ES","og_type":"article","og_title":"Herramientas para crear estilos personalizados para mapas de Google Maps - Blog de Tecnolog\u00eda - Abrima","og_description":"Si alguna vez nos hemos preguntado si hay alg\u00fan modo de personalizar los estilos de los mapas de Google Maps, la respuesta la tenemos en […]","og_url":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/","og_site_name":"Blog de Tecnolog\u00eda - Abrima","article_publisher":"https:\/\/www.facebook.com\/abrimawebs\/","article_published_time":"2014-01-23T04:28:13+00:00","og_image":[{"url":"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2014\/01\/MapStyler.jpg"}],"twitter_misc":{"Escrito por":"Ana Lucia Marrou","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.abrima.com\/blog\/#organization","name":"Abrima","url":"https:\/\/www.abrima.com\/blog\/","sameAs":["https:\/\/www.linkedin.com\/company\/abrima-soluciones-web\/","https:\/\/www.youtube.com\/user\/abrimawebs","https:\/\/www.facebook.com\/abrimawebs\/","https:\/\/twitter.com\/abrimaweb"],"logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.abrima.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.abrima.com\/blog\/wp-content\/uploads\/2018\/03\/abrima-logo.png","contentUrl":"https:\/\/www.abrima.com\/blog\/wp-content\/uploads\/2018\/03\/abrima-logo.png","width":700,"height":700,"caption":"Abrima"},"image":{"@id":"https:\/\/www.abrima.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.abrima.com\/blog\/#website","url":"https:\/\/www.abrima.com\/blog\/","name":"Blog de Tecnolog\u00eda - Abrima","description":"Blog sobre todo lo relacionado con Cloud, Marketing Digital y Web","publisher":{"@id":"https:\/\/www.abrima.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.abrima.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#primaryimage","url":"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2014\/01\/MapStyler.jpg","contentUrl":"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2014\/01\/MapStyler.jpg"},{"@type":"WebPage","@id":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#webpage","url":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/","name":"Herramientas para crear estilos personalizados para mapas de Google Maps - Blog de Tecnolog\u00eda - Abrima","isPartOf":{"@id":"https:\/\/www.abrima.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#primaryimage"},"datePublished":"2014-01-23T04:28:13+00:00","dateModified":"2014-01-23T04:28:13+00:00","breadcrumb":{"@id":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.abrima.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Herramientas para crear estilos personalizados para mapas de Google Maps"}]},{"@type":"Article","@id":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#article","isPartOf":{"@id":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#webpage"},"author":{"@id":"https:\/\/www.abrima.com\/blog\/#\/schema\/person\/70ccd8d5617e3a3d6d5121086c3bb00f"},"headline":"Herramientas para crear estilos personalizados para mapas de Google Maps","datePublished":"2014-01-23T04:28:13+00:00","dateModified":"2014-01-23T04:28:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#webpage"},"wordCount":640,"commentCount":0,"publisher":{"@id":"https:\/\/www.abrima.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#primaryimage"},"thumbnailUrl":"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2014\/01\/MapStyler.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.abrima.com\/blog\/herramientas-para-crear-estilos-personalizados-para-mapas-de-google-maps\/#respond"]}]},{"@type":"Person","@id":"https:\/\/www.abrima.com\/blog\/#\/schema\/person\/70ccd8d5617e3a3d6d5121086c3bb00f","name":"Ana Lucia Marrou","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.abrima.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/90bc8b721d14c58be266256fd3396265?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/90bc8b721d14c58be266256fd3396265?s=96&d=mm&r=g","caption":"Ana Lucia Marrou"},"url":"https:\/\/www.abrima.com\/blog\/author\/anilu\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/posts\/1037"}],"collection":[{"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/comments?post=1037"}],"version-history":[{"count":1,"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/posts\/1037\/revisions"}],"predecessor-version":[{"id":1038,"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/posts\/1037\/revisions\/1038"}],"wp:attachment":[{"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/media?parent=1037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/categories?post=1037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.abrima.com\/blog\/wp-json\/wp\/v2\/tags?post=1037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}