{"id":330,"date":"2014-04-25T11:27:37","date_gmt":"2014-04-25T10:27:37","guid":{"rendered":"http:\/\/heymowski.es\/mydevnotepad\/?p=330"},"modified":"2014-04-25T11:28:01","modified_gmt":"2014-04-25T10:28:01","slug":"problema-de-render-al-insertar-mapa-de-google","status":"publish","type":"post","link":"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/","title":{"rendered":"Problema de render al insertar mapa de google."},"content":{"rendered":"

Aparece un error al introducir un mapa de google en p\u00e1ginas responsive.<\/p>\n

Al parecer google no gestiona bien el with de las imagenes a cargar.<\/p>\n

En este enlace se detalla el problema y aporta una soluci\u00f3n al mismo.<\/p>\n

http:\/\/todojoomla.wordpress.com\/2013\/02\/14\/problema-con-imagenes-de-google-maps-en-responsive-web-design\/<\/a><\/p>\n

El texto en bruto se inserta para conservarlo en local:<\/p>\n

\n

Problema con imagenes de Google Maps en Responsive Web\u00a0Design<\/a><\/h2>\n
Publicado en febrero 14, 2013<\/a> de Mikel<\/a><\/div>\n

Aunque no es un problema que se produzca \u00fanicamente en Joomla, sino en cualquier p\u00e1gina Responsive Web Design<\/a> que incluya un mapa de Google Maps<\/strong>, me parece interesante comentarlo por si nos sucede en la implementaci\u00f3n de alguna de nuestras plantillas.<\/p>\n

El problema que me he encontrado es que Google Maps no renderiza correctamente las imagenes dentro del mapa de nuestro sitio web. No se ve el mu\u00f1eco de Google Street view, ni la imagen para cerrar los \u201cinfo windows\u201d, ni otra serie de imagenes asociadas al mapa.<\/p>\n

Intentando buscar una soluci\u00f3n al problema, me encuentro que google utiliza un sprite css para cargar las imagenes dentro del mapa. Es decir, todas las imagenes se encuentran en un mismo archivo, y google se encarga de posicionarlas en sus sitios respectivos.<\/p>\n

Responsive Web Design<\/strong> es una tecnolog\u00eda que reci\u00e9n est\u00e1 empezando y uno de sus puntos d\u00e9biles es el tema de la im\u00e1genes. Una de las t\u00e9cnicas que se suelen utilizar y yo estaba implementando en la maquetaci\u00f3n de mi plantilla, es darles a las imagenes una anchura m\u00e1xima del 100%. As\u00ed logramos que se ajusten a la anchura de la pantalla de manera autom\u00e1tica, aunque no resolvemos el problema del peso.<\/p>\n

img{max-witdh:100%;}<\/pre>\n
Pues bien, este parece ser el origen del problema de las imagenes dentro de Google Maps<\/strong>. De alguna manera Google se lia al renderizar las imagenes en el mapa si hemos utilizado esta regla css. As\u00ed lo \u00fanico que tenemos que hacer para solucionar el problema, es sobreescribir esa regla para las images de nuestro mapa.<\/p>\n
<style>\r\n   #map img{max-width:none !important}\r\n<\/style>\r\n<div id=\"map\"><\/div><\/pre>\n
Si cargamos nuestro mapa de Google en un div llamado \u201cmap\u201d, podemos indicarle al navegador que no aplique la regla css \u201cmax-width\u201d a nuestro mapa de Google con el c\u00f3digo arriba expuesto.<\/p>\n
Espero que este post te resueva el problema de las imagenes con Google Maps y responsive web design<\/strong>.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Aparece un error al introducir un mapa de google en p\u00e1ginas responsive. Al parecer google no gestiona bien el with de las imagenes a cargar. En este enlace se detalla el problema y aporta una soluci\u00f3n al mismo. http:\/\/todojoomla.wordpress.com\/2013\/02\/14\/problema-con-imagenes-de-google-maps-en-responsive-web-design\/ El … Sigue leyendo →<\/span><\/a><\/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,"footnotes":""},"categories":[13,8,11],"tags":[],"class_list":["post-330","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-javascript"],"yoast_head":"\nProblema de render al insertar mapa de google.  | mydevnotepad<\/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:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"jjuanh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/\"},\"author\":{\"name\":\"jjuanh\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3\"},\"headline\":\"Problema de render al insertar mapa de google.\",\"datePublished\":\"2014-04-25T10:27:37+00:00\",\"dateModified\":\"2014-04-25T10:28:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/\"},\"wordCount\":397,\"commentCount\":0,\"articleSection\":[\"CSS\",\"HTML\",\"JavaScript\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/\",\"url\":\"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/\",\"name\":\"Problema de render al insertar mapa de google. | mydevnotepad\",\"isPartOf\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#website\"},\"datePublished\":\"2014-04-25T10:27:37+00:00\",\"dateModified\":\"2014-04-25T10:28:01+00:00\",\"author\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#website\",\"url\":\"https:\/\/heymowski.es\/mydevnotepad\/\",\"name\":\"mydevnotepad\",\"description\":\"echo "Blog sobre Php y otros entretenimientos, para reforzar mi fr\u00e1gil memoria";\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heymowski.es\/mydevnotepad\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3\",\"name\":\"jjuanh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g\",\"caption\":\"jjuanh\"},\"sameAs\":[\"http:\/\/www.heymowski.es\"],\"url\":\"https:\/\/heymowski.es\/mydevnotepad\/author\/jjuanh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Problema de render al insertar mapa de google.  | mydevnotepad","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:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/","twitter_misc":{"Escrito por":"jjuanh","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/#article","isPartOf":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/"},"author":{"name":"jjuanh","@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3"},"headline":"Problema de render al insertar mapa de google.","datePublished":"2014-04-25T10:27:37+00:00","dateModified":"2014-04-25T10:28:01+00:00","mainEntityOfPage":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/"},"wordCount":397,"commentCount":0,"articleSection":["CSS","HTML","JavaScript"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/","url":"https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/","name":"Problema de render al insertar mapa de google. | mydevnotepad","isPartOf":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/#website"},"datePublished":"2014-04-25T10:27:37+00:00","dateModified":"2014-04-25T10:28:01+00:00","author":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/heymowski.es\/mydevnotepad\/2014\/04\/25\/problema-de-render-al-insertar-mapa-de-google\/"]}]},{"@type":"WebSite","@id":"https:\/\/heymowski.es\/mydevnotepad\/#website","url":"https:\/\/heymowski.es\/mydevnotepad\/","name":"mydevnotepad","description":"echo "Blog sobre Php y otros entretenimientos, para reforzar mi fr\u00e1gil memoria";","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heymowski.es\/mydevnotepad\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3","name":"jjuanh","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g","caption":"jjuanh"},"sameAs":["http:\/\/www.heymowski.es"],"url":"https:\/\/heymowski.es\/mydevnotepad\/author\/jjuanh\/"}]}},"_links":{"self":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts\/330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/comments?post=330"}],"version-history":[{"count":3,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts\/330\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts\/330\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/media?parent=330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/categories?post=330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/tags?post=330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}