3

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

Improve this question
2
  • 3
    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
    Commented Jun 16, 2011 at 15:07
  • You can use the below link format to achieve it. maps.google.com/maps?z=12&t=m&q=loc:LATITUDE+LONGITUDE More detailed information is given in this link teknosrc.com/…
    – user67197
    Commented Feb 8, 2015 at 9:44

2 Answers 2

Reset to default
2

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

Improve this answer
3
  • 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
    Commented May 18, 2011 at 10:41
  • I got the same issue,It helps me lot.I don't have two up votes.
    – Gowri
    Commented Jun 23, 2011 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
    Commented Jun 23, 2011 at 9:59
0

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.

Improve this answer
3
  • 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
    Commented May 12, 2011 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
    Commented May 12, 2011 at 16:47
  • Any idea how I could edit to achieve that? Thanks
    – John
    Commented May 15, 2011 at 17:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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