Google map that opens in a new window

5 Views

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.

Read More

Thanks

Post Views: 5

Related posts

Leave a Reply

2 comments

  1. 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

  2. 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.