Google Maps as Widget Background

[Tom]

Hi all,

Does anyone have any good resources for adding Google Maps as a Background, for example I would quite like to try and add Google Maps as a Background to one of the widget areas in the Parallax Pro Theme.

All the best,
Tom

[Josephine]

Just asking myself the same question: how could add a full width google map on my Parallax Pro site. Does no one have an idea about this? I would be very greatfull!

Thanks,
Josephine

[Carlo]

Hi Tom and Josephine. Do you want just a screenshot of the map or an interactive map? Also, do you want the text over the top of the map (probably not a good idea if it's an interactive map)?

---

Comprehensive, easy to follow Genesis documentation

[Josephine]

Hi, Carlo I would like an interactive map. A screenshot would be easy 😉

Josephine

[Carlo]

Hi Josephine. You could grab an iframe from Google Maps, give it a width of 9999 or something that's guaranteed to be larger than any screen size, and drop it into one of your text widgets on your Parallax Pro site.

Then, in your theme stylesheet, you could restyle that text widget to remove all the margin and padding and make it full width. The iframe, despite it coded to be 9999 pixels wide, should resize itself to the width of the window.

The above is exactly what I just tried out in my browser inspector and it seems to work well. The only thing is you won't get the parallax effect, because that comes from the CSS background image and an iframe is not an image.

One more thing I'd like to add. I actually don't think full width google maps are a good idea, because if you're scrolling down the page with your scroll wheel or trackpad, when you hit the map, it will take over the scrolling, and you'll find yourself zooming out the map instead of scrolling down the page. But it's up to you.

---

Comprehensive, easy to follow Genesis documentation

[ginabegin]

Carlo (and the rest of the crew), I hope it's okay that I jump in here since it seems to be on topic. I found a map that is full width and has some interactivity (you can click on landmarks and double click to zoom out; can't figure out how to zoom back out though!). I love the look of it and would like to recreate it in my Cafe Pro theme but can't quite get it. Not sure if this is something that would work for your site, Josephine, but Carlo, maybe you have some tips on how to recreate something like this? I tried to look up the coding, but my map doesn't look nearly as good!

Map: http://cobblehilldigital.com/contact/

My page: http://kgshowroom.com/wordpress/ (scroll down the homepage to see my sad attempt. 🙂

[Josephine]

Sorry for my late reply, I used a small map in the sidebar instead. But thanks for your reply Carlo I probably can use this in a next project. So I would set this map in the last text widget and the scrolling would not be a big problem I guess.

Josephine

[christo]

hi everybody
i've read carefuly all posts about google map and i didn't find out how to manage it.
It seems to have 2 solutions :
the one Carlo suggest. I'm working on Cafe pro theme and i couldn't succed to put the iframe in a widget area.
The other solution is to use WP google map plugin which allow to use a shortcode, but first you need to add some code in your function.php in order to make possible the use of shortcode in a text widget :

add_filter( 'widget_text', 'shortcode_unautop'); 
add_filter( 'widget_text', 'do_shortcode');

But i've got ( also !! ) a problem with that: nothing happens in the widget.
so... i would like to know if somebody found out a good method for a google map integration.
Thanks

[Author]

Posts