1

I'm trying to allow users to click on two different addresses to display two different google maps. The addresses are surrounded in <a> tags.

<a href="#" id="display_bush_map"><br>
    5123 Bush River Rd.<br>
    Columbia SC 29212</a>

and

<a href="#" id="display_wappoo_map" <br>
    1023 Wappoo Road Suite A7<br>
    Charleston, SC 29407</a>

I'm loading two google maps and then hiding one of them after page load using jQuery's $(document).ready() function.

Here's the entire script:

<script>
$(document).ready(function(){

    //set the default map to Bush River Rd
    //hide the Wappoo Road map on page load
    $("#wappoo_road").hide();

    //clicking Bush River address makes Bush River map display
    $("#display_bush_map").click(function() {
        $("#bush_river").show();
        $("#wappoo_road").hide();
        return false; // so link click doesn't reload page
    });

    $("#display_wappoo_map").click(function() {
        $("#wappoo_road").show();
        $("#bush_river").hide();
        return false;
    });
});</script>

And the corresponding maps (without the map code to save space).

<div id="bush_river" class="google_maps"><iframe src="mapcode1" width="1366" height="318" frameborder="0" style="border:0"></iframe></div>
<div id="wappoo_road" class="google_maps"><iframe src="mapcode2" width="1366" height="318" frameborder="0" style="border:0"></iframe></div>

If I try to switch between maps using the <a> tags to call .show() and .hide() my second map displays as a broken map. But only if the map is hidden after initial page load.

If I don't hide the second map initially everything works fine, except both maps can be seen initially - which isn't what I want.

Here's the page I'm having issues with

http://tpmchosting.com/dev/cbe/contact.php

I've triple checked the map code and it's not a problem with the contents of the iFrame. I'm stumped as to what else it can be.

EmbraceCode
  • 11
  • 2
  • Here is an answer, it might be helpfull http://stackoverflow.com/questions/3360494/keep-a-google-maps-v3-map-hidden-show-when-needed – Mahmoud Apr 01 '14 at 18:17

1 Answers1

0

You have to trigger resize on the map you want to display after it was hidden.

AlMighty
  • 1