Menu icon Foundation
Interchange and Google Maps Problem

I'm new to Foundation and I am looking to use the interchange ability to show a fully functional Google Map for desktops and then remove it for more basic files for mobile and tablet.

The example in the documentation looks fairly simple but I am finding that it just does not work.

My main page can be simplified to this:

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<!--[if IE 10]><html class="ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/css/foundation.css" />
        <script src="/js/modernizr.js"></script>            
    </head>
    <body>
         
        <div class="row">
            <div class="small-12 large-6 columns">
                Some HTML here
            </div>
            <div class="small-12 large-6 columns">
                <h3>Our Location</h3>
                <div id="interchangeMarkup" data-interchange="[/interchange/map/default.html, (default)], [/interchange/map/medium.html, (medium)], [/interchange/map/large.html, (large)]">
                    <div data-alert class="alert-box secondary radius">
                        Loading the map
                        <a href="#" class="close">&times;</a>
                    </div>
                </div>
            </div>            
        </div>

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
        <script src="/js/foundation/foundation.js"></script>
        <script src="/js/foundation/foundation.topbar.js"></script>
        <script src="js/foundation/foundation.interchange.js"></script>

        <script>
            $(document).foundation();
            var doc = document.documentElement;
            doc.setAttribute('data-useragent', navigator.userAgent);
        </script>
    </body>
</html>
        

The default.html and medium.html files are simply image tags and both works fine.

The problem is the large.html. That contains the Google Map API Code which works fine if I access the page directly

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">

    </head>
    <body>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=false"></script>
        <script>
            var map;
            function initialize() {
                var mapOptions = {
                    zoom: 15,
                    center: new google.maps.LatLng(-34.397, 150.644)
                };
                map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
        <div id="map-canvas"></div>
    </body>
</html>

However, when the Interchange should display it, I just get a blank white page as if the Javascript has failed which does appear to be the case.

When I run the Javascript debugger in Chrome, the page itself works fine, but when I try accessing the index page I notice the following error occurs:

Uncaught ReferenceError: google is not defined

Referencing line 29 of the large.html file.

The HTML source for that file was taken directly from the Google Maps API example page (https://developers.google.com/maps/documentation/javascript/examples/map-simple-async).

I have also tried the Simple Map code

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

Which has the same problem.

In a final attempt I even tried copying the source directly from the Foundation Docs page (http://foundation.zurb.com/docs/examples/interchange/large.html) but that also fails.

<style type="text/css">
    /* Set a size for our map container, the Google Map will take up 100% of this container */
    #map {
        width: 100%;
        height: 400px;
    }
</style>


<p><!--
      You need to include this script on any page that has a Google Map.
      When using Google Maps on your own site you MUST signup for your own API key at:
          https://developers.google.com/maps/documentation/javascript/tutorial#api_key
      After your sign up replace the key in the URL below or paste in the new script tag that Google provides.
  -->
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&sensor=false"></script></p>
  <script type="text/javascript">
      // When the window has finished loading create our google map below
      google.maps.event.addDomListener(window, 'load', init);

      function init() {
          // Basic options for a simple Google Map
          // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
          var mapOptions = {
              // How zoomed in you want the map to start at (always required)
              zoom: 11,

              // The latitude and longitude to center the map (always required)
              center: new google.maps.LatLng(40.6700, -73.9400), // New York

              // How you would like to style the map.
              // This is where you would paste any style found on Snazzy Maps.
              styles: [{'featureType':'water','stylers':[{'visibility':'on'},{'color':'#acbcc9'}]},{'featureType':'landscape','stylers':[{'color':'#f2e5d4'}]},{'featureType':'road.highway','elementType':'geometry','stylers':[{'color':'#c5c6c6'}]},{'featureType':'road.arterial','elementType':'geometry','stylers':[{'color':'#e4d7c6'}]},{'featureType':'road.local','elementType':'geometry','stylers':[{'color':'#fbfaf7'}]},{'featureType':'poi.park','elementType':'geometry','stylers':[{'color':'#c5dac6'}]},{'featureType':'administrative','stylers':[{'visibility':'on'},{'lightness':33}]},{'featureType':'road'},{'featureType':'poi.park','elementType':'labels','stylers':[{'visibility':'on'},{'lightness':20}]},{},{'featureType':'road','stylers':[{'lightness':20}]}]
          };

          // Get the HTML DOM element that will contain your map
          // We are using a div with id="map" seen below in the <body>
          var mapElement = document.getElementById('map');

          // Create the Google Map using out element and options defined above
          var map = new google.maps.Map(mapElement, mapOptions);
      }
  </script>

<p><!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
  <div id="map"></div></p>

Has anyone actually managed to make it work?

Yes I have replaced my API Key within the code examples above.

mapsGoogleinterchange

I'm new to Foundation and I am looking to use the interchange ability to show a fully functional Google Map for desktops and then remove it for more basic files for mobile and tablet.

The example in the documentation looks fairly simple but I am finding that it just does not work.

My main page can be simplified to this:

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<!--[if IE 10]><html class="ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/css/foundation.css" />
        <script src="/js/modernizr.js"></script>            
    </head>
    <body>
         
        <div class="row">
            <div class="small-12 large-6 columns">
                Some HTML here
            </div>
            <div class="small-12 large-6 columns">
                <h3>Our Location</h3>
                <div id="interchangeMarkup" data-interchange="[/interchange/map/default.html, (default)], [/interchange/map/medium.html, (medium)], [/interchange/map/large.html, (large)]">
                    <div data-alert class="alert-box secondary radius">
                        Loading the map
                        <a href="#" class="close">&times;</a>
                    </div>
                </div>
            </div>            
        </div>

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
        <script src="/js/foundation/foundation.js"></script>
        <script src="/js/foundation/foundation.topbar.js"></script>
        <script src="js/foundation/foundation.interchange.js"></script>

        <script>
            $(document).foundation();
            var doc = document.documentElement;
            doc.setAttribute('data-useragent', navigator.userAgent);
        </script>
    </body>
</html>
        

The default.html and medium.html files are simply image tags and both works fine.

The problem is the large.html. That contains the Google Map API Code which works fine if I access the page directly

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">

    </head>
    <body>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=false"></script>
        <script>
            var map;
            function initialize() {
                var mapOptions = {
                    zoom: 15,
                    center: new google.maps.LatLng(-34.397, 150.644)
                };
                map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
        <div id="map-canvas"></div>
    </body>
</html>

However, when the Interchange should display it, I just get a blank white page as if the Javascript has failed which does appear to be the case.

When I run the Javascript debugger in Chrome, the page itself works fine, but when I try accessing the index page I notice the following error occurs:

Uncaught ReferenceError: google is not defined

Referencing line 29 of the large.html file.

The HTML source for that file was taken directly from the Google Maps API example page (https://developers.google.com/maps/documentation/javascript/examples/map-simple-async).

I have also tried the Simple Map code

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

Which has the same problem.

In a final attempt I even tried copying the source directly from the Foundation Docs page (http://foundation.zurb.com/docs/examples/interchange/large.html) but that also fails.

<style type="text/css">
    /* Set a size for our map container, the Google Map will take up 100% of this container */
    #map {
        width: 100%;
        height: 400px;
    }
</style>


<p><!--
      You need to include this script on any page that has a Google Map.
      When using Google Maps on your own site you MUST signup for your own API key at:
          https://developers.google.com/maps/documentation/javascript/tutorial#api_key
      After your sign up replace the key in the URL below or paste in the new script tag that Google provides.
  -->
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&sensor=false"></script></p>
  <script type="text/javascript">
      // When the window has finished loading create our google map below
      google.maps.event.addDomListener(window, 'load', init);

      function init() {
          // Basic options for a simple Google Map
          // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
          var mapOptions = {
              // How zoomed in you want the map to start at (always required)
              zoom: 11,

              // The latitude and longitude to center the map (always required)
              center: new google.maps.LatLng(40.6700, -73.9400), // New York

              // How you would like to style the map.
              // This is where you would paste any style found on Snazzy Maps.
              styles: [{'featureType':'water','stylers':[{'visibility':'on'},{'color':'#acbcc9'}]},{'featureType':'landscape','stylers':[{'color':'#f2e5d4'}]},{'featureType':'road.highway','elementType':'geometry','stylers':[{'color':'#c5c6c6'}]},{'featureType':'road.arterial','elementType':'geometry','stylers':[{'color':'#e4d7c6'}]},{'featureType':'road.local','elementType':'geometry','stylers':[{'color':'#fbfaf7'}]},{'featureType':'poi.park','elementType':'geometry','stylers':[{'color':'#c5dac6'}]},{'featureType':'administrative','stylers':[{'visibility':'on'},{'lightness':33}]},{'featureType':'road'},{'featureType':'poi.park','elementType':'labels','stylers':[{'visibility':'on'},{'lightness':20}]},{},{'featureType':'road','stylers':[{'lightness':20}]}]
          };

          // Get the HTML DOM element that will contain your map
          // We are using a div with id="map" seen below in the <body>
          var mapElement = document.getElementById('map');

          // Create the Google Map using out element and options defined above
          var map = new google.maps.Map(mapElement, mapOptions);
      }
  </script>

<p><!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
  <div id="map"></div></p>

Has anyone actually managed to make it work?

Yes I have replaced my API Key within the code examples above.

This post has been closed. No new replies can be added.

Dylan Baumann over 5 years ago

I've just run into the same exact issue. Loading 2 small images with a google maps on the large version (just like on the example page). I've copied all of the html includes used on the example page, which initially works great.

On the initial page load on Large you get the map, scale down - image, scale down - smaller image. Scale back up to medium - get medium image, then scale to large and you get a large blank area.

It appears that the javascript loads for the map, but then when interchange replaces the content the google maps js doesn't affect the map once it's been reloaded.

In the example page it mentions including something called a 'reflow' when initializing the foundation script, however that does not appear to fix it either. (for the record there is no 'reflow' used on the zurb example page either)

Neil Mastroianni over 5 years ago

Hello Steven and Dylan,

I've been wrestling with pretty much the same problem. I feel I have, at least for now, found a solution. I inspected the Interchange documentation page and searched it for 'reflow' and came up empty also. However, when I searched for 'interchange', my results bore some fruit. See the code below that Foundation uses to load that map in their all.js file:
Javascript
$("#interchangeMarkup").on("replace", function() {
$.getScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false&callback=initializeMaps")
});

It appears that every time Interchange changes the content of the div#interchangeMarkup, it calls the maps API with the callback=initializeMaps parameter. For my purposes, I was trying to use Interchange to load a Foundation JS (top-bar) html partial. The reflow advice in the documentation provided no help. I then replaced the #interchangeMarkup with my own selector and the $.getScript(...) part with
Javascript
$(document).foundation();

This allows the drop down functionality of the top-bar to work again. My concern is that this might be messy on a large site.

Hope this helps.

Alan Smithee over 5 years ago

Neil. You are the man. Here's my working code, as further help to others:

By adding id="swap to my markup and then using that selector in the js, following your example, I've got a top-bar menu loading via interchange, with all js (e.g. dropdowns) working:

<div id="swap" data-interchange="[../small-header.html, (only screen)], [../medium-header.html, (medium)]">
</div>
$("#swap").on("replace", function() {
$(document).foundation();
});

Rob Lorton over 5 years ago

Many thanks Neil & Alan - you've just ended my off-canvas drop down menu pain :-)

Allen O'Leary over 5 years ago

Just to clarify for those of us who don't have much JavaScript knowledge.

This works by placing the JS quoted above in the tag at the bottom of the page. If you put it in the top it won't load. So the bottom of the page will look something like this using above example:

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/fastclick.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
      $("#swap").on("replace", function() {
$(document).foundation();
});
    </script>
  </body>
</html>