Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a custom post type called 'Venue' and I would like my users to be able to create a map to that venue, basically just a marker on a map with the name of the venue and its address. The thing is that I want to create a small snapshot of the map and on hover the website user would click and open the full map in a new tab or window.

How can I create this in WordPress? Most Google map plugins for WordPress enable you to embed the map directly into the page, but I want it to be clickable and open the full map in a new tab.

Thanks

share|improve this question
2  
You've asked seven questions and accepted answers for none of them. You might want to consider accepting some answers if you want people to continue to offering answers to your questions. –  Chip Bennett Jun 16 '11 at 15:07
add comment

2 Answers

So, the issue is that if you use a google custom embed code, then the iframe sucks up all the clicks, so you can't trigger a link.

The solution I've found is to use Google Static Maps which I discovered via Simple Static Googlemaps Plugin.

My priority is an attractive map which loads faster (requires no javascript) until the user clicks to navigate the map, then I want it to pop up in a lightbox (I use wp-fancybox). The plugin above may still function for WP v.3+ cos it looks pretty simple, but I didn't try.

Instead I've embedded the following into my template:

$static_map = '
<img alt="Googlemap" src="http://maps.google.com/maps/api/staticmap?center='. $location
.'&markers=small|' . $location
.'&zoom=14'
.'&size=480x340'
.'&sensor=false"/>';

$popup_map = '
http://maps.google.com.au/maps?q='. $location
.'&f=q&hl=en&geocode=&mrt=all&ie=UTF8&hq=&'
.'hnear=' . $location 
.'&z=14&iwloc=&output=embed';

$map = '
<div class="map clearfix">
    <a class="iframe" href="'. $popup_map . '">
    ' . $static_map . '
    </a>                
</div>' ."\n";

print($map);
  • $location is just an address, nothing fancy (10 Monkey St, Jungletown, Madagascar)
  • in $popup_map leaving &iwloc= blank hides the text bubble i haven't fiddled too much with other params 'cos it seems to work ;)

Hope that helps! (Plenty of room for improvement) Cheers, Tim

share|improve this answer
    
Thanks sounds very much like what I need, how can I add a marker to the full map that opens? And also how can I use lat and long instead of an address, as maps are not very accurate in my country? Thanks! –  John May 18 '11 at 10:41
    
I got the same issue,It helps me lot.I don't have two up votes. –  gowri Jun 23 '11 at 9:57
    
@john:did you red his referrence,there is the answer for all your questions. it's simple use center=40.714728,-73.998672. –  gowri Jun 23 '11 at 9:59
add comment

Are you wanting them to go to a larger map on your site or to something like maps.google.com? If you want to link to the Google map on Google, then you can simply add target="_blank" to your link to make it look like

<a href="http://www.destinationurl.com" target="_blank">Some Text or Image goes here</a>

Alternately, there's always the option of setting up Lightbox/Thickbox to open the Google maps in an iframe. Something like Thickbox might work for this.

As a general rule of thumb for web development, you don't want to force the website visitors to open a new window or tab when clicking a link on your site. Rather, you want to contain that information on your site the best as possible. This will help your SEO presence and help lower bounce-rates.

share|improve this answer
    
Yeah I want them to open in a new tab with Google Maps and the marker. I am looking for a plugin that would enable the user to set the marker within the custom post type edit screen and this would be the map shown when the new tab is opened. –  John May 12 '11 at 16:38
    
I think this will be the closest thing you'll be able to get: wphostreviews.com/mappress/mappress-pro It might require a little editing on the backend to get exactly what you're looking for with the opening in another window/tab. –  NW Tech May 12 '11 at 16:47
    
Any idea how I could edit to achieve that? Thanks –  John May 15 '11 at 17:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.