Multiple maps to show in one iframe

G’day gbivingsDC,

Probably the easiest way to do that would be to use jQuery UI tabs, and the snippet detailed on the FAQ for getting the maps to work properly in tabs.

To use jQuery UI tabs on a template, enqueue the script ‘jquery-ui-tabs’ and load the CSS for a jQuery UI theme, then add your script code.

If you’re not familiar with jQuery UI, and don’t have the time to learn it, perhaps look at using a plugin for that — e.g. Post UI Tabs.

cheers,
Ross

Ross,
Hi there. Let me explain a little further because my jQuery skills leave a lot to be desired.

Here’s what I’d like. Set the map with the coordinates for the main office as default on the Contact Us page and then have the flexible map in the window change when someone clicks on an address link (not a tab, just a link). Perhaps that’s what your saying I can do with jQuery UI tabs.

You can see the page here: https://newsite.blancopc.com/contact/ For example, want the link for the Miami office to open in the map window and not a new Google Map tab as it does now.

Thanks.
Gary

G’day Gary,

Yes, you can do that with tabs, it’s how you style them that gets your results.

However, I’m thinking now that a simple custom map plugin would suit your page better. The Google Maps API is pretty easy to use, perhaps you or your website developer can look at that.

Alternatively, you could use my plugin to put the map there initially, then use the map object it creates with some custom JavaScript to change the map location when a link is clicked. See “How can I get access to the map object?” in the FAQ.

cheers,
Ross