Displaying two google maps in jQuery UI tabs

Question

I have searched the internet for a long time for a solution to this problem. There is either no easily found solution or I am terrible at researching. If it is the latter, I'm sorry. I've prepared the most basic jsfiddle possible to display my problem. You will see that the first map will load, and the second loads as well but is not usable. If someone can show me how to fix this so that both maps load normally, that would be great. thank you.

HTML:

<div id="tabs">
        <ul>
            <li><a href="#tabs-1">Map 1</a>
            </li>
            <li><a href="#tabs-2">Map 2</a>
            </li>
        </ul>
        <div id="tabs-1">
            <div id="map-canvas"></div>
        </div>
        <div id="tabs-2">
            <div id="map-canvas2"></div>
        </div>
</div>

JAVASCRIPT:

$(document).ready(function () {
    $("#tabs").tabs();
    initialize();
});

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
    var map2 = new google.maps.Map(document.getElementById("map-canvas2"),
    mapOptions);
}

http://jsfiddle.net/Vbq93/

I believe it to be a common problem, I'm not sure why I haven't found an answer. I think in the past I have circumvented the issue by loading one of the maps in an iframe — Sam Creamer, Jul 07 '14 at 14:14
Yeah I'm afraid I've done something similar - hopefully we'll get an answer! — Liath, Jul 07 '14 at 14:14
I'm gonna go with Sam's idea. It's exactly what I was thinking. In order for the map to be functional, it needs it's own DOM. If you have more than one on a page, I don't think that will happen. A iFrame seperates it out. — durbnpoisn, Jul 07 '14 at 14:16
Got it, that's what I was thinking. I realize they aren't designed for this kind of use that I'm hoping to achieve. — Sam Creamer, Jul 07 '14 at 14:17
why was this marked as a duplicate? The reference you posted does NOT answer my question. This question is specifically regarding having two google maps on separate jquery UI tabs, as shown in my jsfiddle. — Sam Creamer, Jul 07 '14 at 15:51

score -1 · Answer 1 · answered Jul 07 '14 at 15:47

I will answer my own question. I have found a solution in case anyone else has this problem. It's what I've always been doing, but others believe this is the best way because as @durbnpoisn stated, maps need their own DOM to function properly.

So, I put the maps in iframes, then they work fine. Here is the code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>tabs test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
        $(function() {
            $( "#tabs" ).tabs();
        });
    </script>
</head>
<body>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Map 1</a></li>
            <li><a href="#tabs-2">Map 2</a></li>
        </ul>
        <div id="tabs-1">
            <iframe src="iframe.html" style="border:none;width:100%;height:500px;">123</iframe>
        </div>
        <div id="tabs-2">
            <iframe src="iframe.html" style="border:none;width:100%;height:500px;">123</iframe>
        </div>
    </div>


</body>
</html>

and iframe.html is:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

Displaying two google maps in jQuery UI tabs

1 Answers1