Skip to main content

Using Require JS with Bootstrap, Google maps, and more

Require JS is a JavaScript file and module loader. Its a great tool for including JavaScript on your website.

This post described how to move the previous Google Maps with bootstrap code into a "config" file for use with require JS.

Screenshot

Works off previous Post: Bootstrap 3 and Google Maps .

Step 1

First, we need to download the latest version (at the time of writing its 2.1.9). For production, you will want the minified version.

Step 2

Check out Miller Medeiros GitHub Repository and download any plugins you would be interested in.

Step 3

For your script tag, you will just need:

<script data-main="js/config" src="js/require.js"></script>

For the "data-main" use the path to the javascript config file, but do not add the ".js" extension.

Step 4

Create a file called config.js and place in js directory. The first part of the file is configuring the locations of the files your going to use.

Javascript files should be in the same directory as require.js and config.js. When referencing a path, do not add .js extension. The below is whats minimal for Google V3 with Bootstrap 3.

require.config({
    paths: {
        'jquery': 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3',
        'jquery.bootstrap': 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min',
        'async': 'async',
        'goog': 'goog',
        'propertyParser' : 'propertyParser'
    },
    shim: {
        'jquery.bootstrap': ['jquery']
    }
});

Shims: will make sure jquery loads before bootstrap.

Step 5

Next, you will need to "require" the items under your config:

//require.config code from above here
require(['jquery','jquery.bootstrap','goog!maps,3,other_params:sensor=false'], function($) {
    //jquery code will be moved here
});

Step 5

Now, your code will need to be altered a bit for the jquery/bootstrap code to load maps in modal.

var myLatlng = new google.maps.LatLng(43.65644,-79.380686);

    $(function() {

        //start of modal google map
      $('#mapmodals').on('shown.bs.modal', function () {
        var mapOptions = {
              center: myLatlng,
              zoom: 14,
              mapTypeControl: false,
              center:myLatlng,
              panControl:false,
              rotateControl:false,
              streetViewControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"),
                mapOptions);

            var contentString = '<div id="mapInfo">'+
            '<p><strong>Cineplex Odeon Yong & Dundas</strong><br>'+
            'Suite 402<br>10 Dundas Street East<br>' +
            'Toronto, ON<br>'+
            'P: (416) 977-9262</p>'+
            '<a href="http://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&ved=0CF4QFjAA&url=http%3A%2F%2Fwww.cineplex.com%2FTheatres%2FTheatreDetails%2FCineplex-Odeon-Yonge-Dundas-Cinemas-formerly-AMC-.aspx&ei=wVxnUdfWM8GtqgGc5YGoCQ&usg=AFQjCNFrLpCFDXGjtGx6y1GSkSNvhdrMpA&bvm=bv.45107431,d.aWM" target="_blank">Now Playing</a>'+
            '</div>';

          var infowindow = new google.maps.InfoWindow({
            content: contentString
          });

          var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title:"Cineplex Odeon Yong & Dundas",
                  maxWidth: 200,
                  maxHeight: 200
          });


          google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(map,marker);
          });

          google.maps.event.addDomListener(window, 'load');
          google.maps.event.trigger(map, "resize");
          map.setCenter(myLatlng);
      });
      //end of modal google map
    }); //end jquery functions

Completed Config.js File

The full code is below. Alternatively, you can check out my JavaScript Repository as well.

require.config({
    paths: {
        'jquery': 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3',
        'jquery.bootstrap': 'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min',
        'async': 'async',
        'goog': 'goog',
        'propertyParser' : 'propertyParser'
    },
    shim: {
        'jquery.bootstrap': ['jquery']
    }
});

require(['jquery','jquery.bootstrap','goog!maps,3'], function($) {
     var myLatlng = new google.maps.LatLng(43.65644,-79.380686);

    $(function() {

        //start of modal google map
      $('#mapmodals').on('shown.bs.modal', function () {
        var mapOptions = {
              center: myLatlng,
              zoom: 14,
              mapTypeControl: false,
              center:myLatlng,
              panControl:false,
              rotateControl:false,
              streetViewControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"),
                mapOptions);

            var contentString = '<div id="mapInfo">'+
            '<p><strong>Cineplex Odeon Yong & Dundas</strong><br>'+
            'Suite 402<br>10 Dundas Street East<br>' +
            'Toronto, ON<br>'+
            'P: (416) 977-9262</p>'+
            '<a href="http://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&ved=0CF4QFjAA&url=http%3A%2F%2Fwww.cineplex.com%2FTheatres%2FTheatreDetails%2FCineplex-Odeon-Yonge-Dundas-Cinemas-formerly-AMC-.aspx&ei=wVxnUdfWM8GtqgGc5YGoCQ&usg=AFQjCNFrLpCFDXGjtGx6y1GSkSNvhdrMpA&bvm=bv.45107431,d.aWM" target="_blank">Now Playing</a>'+
            '</div>';

          var infowindow = new google.maps.InfoWindow({
            content: contentString
          });

          var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title:"Cineplex Odeon Yong & Dundas",
                  maxWidth: 200,
                  maxHeight: 200
          });


          google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(map,marker);
          });

          google.maps.event.addDomListener(window, 'load');
          google.maps.event.trigger(map, "resize");
          map.setCenter(myLatlng);
      });
      //end of modal google map
    }); //end jquery functions
});