Show/Hide Google Maps

Question

I am trying to show/hide a div containing a google map.
Desired behavior: when I click on the "location" link, the link below it containing a div that contains the google map should appear. When I click on the "location" link again the map div/link should hide.

I tried using the following script:

<script type="text/javascript">
    $(document).ready(function() {  //The page has loaded.
    $("#googleMap").hide();     //Hide the location div. 
    $("#location").click(function() {   //if user clicked on location link.
    $("#googleMap").toggle('fast'); //toggle hide/show the map.
    });
  });
</script> 

The relevant HTML is:

<ul id="">
      <li id="location"><a href="">Location</a></li>
      <li><div id="googleMap">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2981.1842013890846!2d-70.85122260000003!3d41.651762000000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e4e7197a6e9673%3A0x92a061a27f9a1100!2s404+Huttleston+Ave!5e0!3m2!1sen!2sus!4v1402097563509" width="100%" frameborder="0" style="border:0"></iframe>
      <!-- / googleMap div -->
      </div></li>
    </ul> 

I've tested it in the latest versions of Firefox, Chrome and Safari (all mac) and all do not work as expected but each reacts (incorrectly) in a different manner.

I have tried assigning id="googleMap" to the link and the div and the problem remains.

I am not too familiar w/ JS/JQ, but I have used the above script for other applications (asides from showing a google map) so I'm wondering if I need to adjust the google code somehow?

Answer 1

If you wanna show / hide the map only.. Let's try this code snippet, may be a little help for you..

$(document).ready(function () {
    var bi = new google.maps.LatLng(-6.182134, 106.821825);
    var mapOptions = {
        center: new google.maps.LatLng(-2.548926, 118.0148634),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        title: 'Bank Indonesia',
        animation: google.maps.Animation.BOUNCE
    });
    marker.setPosition(bi);
    $("#btn").click(function () {
        $("div").toggle();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div id="map_canvas" style="width:600px; height:250px"></div>
<p id='btn'>Click here to Show / Hide</p>

Answer 2

This code tested on Chrome, Firefox, Safari works fine..

Javascript

<script>
    function displayMap() {
                document.getElementById('map_canvas').style.display="block";
                initialize();
            }
     function initialize() {
              // create the map

            var myOptions = {
                zoom: 14,
                center: new google.maps.LatLng(0.0, 0.0),
                mapTypeId: google.maps.MapTypeId.ROADMAP
              }
                map = new google.maps.Map(document.getElementById("map_canvas"),
                                            myOptions);

             }
</script>

CSS

<style type="text/css">
#map_canvas {display:none;}
</style>

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

Hope this would Help!!