I’d like to embed a Google Map into a WordPress post but without using an iframe or a plugin.
I have tried using the following HTML in the post:
<div id="map_canvas" style="border: 1px solid black;" width="100%" height="500px"></div>
But this gives me a map of zero height. I’d like to use a percentage-width map as I’m using a TwentyEleven child theme, so the site is responsive.
Can anyone suggest how I should style map_canvas so it doesn’t collapse?
Thanks.
Basically, it won’t work. WordPress will strip the code out when switching from html to visual. It will only work if you leave the “html” view at all times while editing a post with the gmap code. I strongly recommend to use a plugin, like this one:
http://wordpress.org/extend/plugins/google-maps-v3-shortcode/
If you are willing to use the Google Maps embed code with iframe, you could use a plugin that I wrote called FitMaps. It makes a Google Maps iframe responsive, and is based on the FitVids plugin for responsive video embeds.
The Fitmaps plugin wraps all Google Maps iframes in a div element and makes the iframe take up 100% width and height of this div. The wrapping div is then easily made responsive with css.
See: http://www.waywayway.nl/bin/handig-en-leuk/tutorials/responsive-google-maps-embeds/
You can stop WordPress ‘mangling’ code by doing some processing.
I put that in to a mini plugin here http://llocally.com/wordpress-plugins/?did=2
Also if you want to use MapQuest rather than Google maps there is a plugin here http://wordpress.org/extend/plugins/get-directions/