I have no idea how I would go about doing this. Can someone helpe me with the proper shortcode or html? To clarify I would like to use the built in prettyphoto to open up a map from google with predefined width and height.
possible to use built in prettyphoto to call up google maps?
(12 posts) (4 voices)
In the HTML editor (not Visual!) of Wordpress, when creating / editing a page / post, use the following code:
<a href="GOOGLE_MAPS_LINK" rel="prettyPhoto">IMAGE / TEXT</a>
You will have to replace GOOGLE_MAPS_LINK with the link you will be using for the google maps or image, and
IMAGE / TEXTwith the image or text you are willing to use to pop the prettyphoto box!
Let me know if you managed to get it working!
this is the code i typed
<a href="http://maps.google.com/?ie=UTF8&ll=29.866847,-95.322876&spn=1.531445,2.123108&z=9" rel="prettyPhoto">IMAGE / TEXT</a>
and it says cannot load, make sure the path correct and image exists.
You have to use the iframe link for this. Here's an example:
<a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Granville+Island,+Vancouver&sll=49.293533,-123.13189&sspn=0.010454,0.032637&ie=UTF8&hq=&hnear=Granville+Island,+Canada&ll=49.279565,-123.129787&spn=0.020917,0.065274&t=h&z=14&iwloc=A&output=embed?iframe=true&width=640&height=480" rel="prettyPhoto[map]" title="This is a map.">THE LINK</a>
Please notice the
;output=embed?iframe=true&width=640&height=480code. This is what you are looking for.
Dorian, perfect! It works great now! :) Thank you so much! Awesome customer support for an awesome theme. This is the best theme ever!
@Dorian, the link provided fails to work in IE9.
I used the same code:
<a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Granville+Island,+Vancouver&sll=49.293533,-123.13189&sspn=0.010454,0.032637&ie=UTF8&hq=&hnear=Granville+Island,+Canada&ll=49.279565,-123.129787&spn=0.020917,0.065274&t=h&z=14&iwloc=A&output=embed?iframe=true&width=640&height=480" rel="prettyPhoto" title="This is a map.">
The overlay comes up but it is empty, the map does not appear. Do you know why?
The problem here is that you need to update the prettyPhoto files.
1. Create a backup of your theme folder.
2. Download the latest version of prettyPhoto, http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/, make sure to select the "Production Version".
3. Extract the files from the downloaded zip and copy the "prettyphoto" folder into /wp-content/themes/awake/lib/scripts/ directory. You may have to rename the folder to "prettyPhoto".
Just make sure that you are naming the new files exactly as the old ones, and it should work.
I have updated the files but the issue remains the same. Here is a test page:
Hmmm... I went to double-check what was going on the server an noticed there were two Pretty Photo folders - the old one called "prettyphoto" and the new one, per your instructions, "prettyPhoto". I deleted the old files and now it is not working at all... I'll get back shortly with more info...
OK, so I figured out the correct name for the folder is "prettyphoto", the same as previous folder was named. This makes it the updated files work in Firefox. Still, they fail in IE.
Now this test makes me think... maybe there is a cap typo in the Awake code and that may be why IE fails (though I would think IE would be less cap sensitive, like Windows, not more...). It is just that I have noticed the original files from Pretty Photo had the folder names with "prettyPhoto"...
Please let me know what else I should try to get the overlay working in IE. http://formotus.komotion.com/test-map-prettyphoto-ie/
I just tested your website in Internet Explorer, and it works fine. You should clear the cache of your browser, and then try again.
I tried the website on another machine with IE9 and it came up, although on subsequent refreshes of the page sometimes it would fail. Not sure why the inconsistent behavior but I'll just chuck it to IE idiosyncrasies...
Thanks for looking into it.
You must log in to post.