Google map that opens in a new window

by

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

2 Answers
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="https://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

Leave a Comment