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.

Note:
Assumes the following directory structure:
RequireJS Directory Structure

Works off previous Post: Bootstrap 3 and Google Maps

Step 1: Download the latest version (at the time of writing its 2.1.9)

http://requirejs.org/docs/download.html#requirejs

Step 2: Download plugins from github
Plugins are necessary to load items such as items from the Google api (maps, fonts, etc).

https://github.com/millermedeiros/requirejs-plugins/

Step 3: Remove all current javascript, and replace with:

<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: 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 6: Alter 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

Full demo:
View the full demo: http://jenntesolin.com/demos/requirejs.html
View the full config file: http://jenntesolin.com/demos/js/config.js
View the source code: https://github.com/jennifert/JavaScript-Demos/tree/master/RequireJs

Resources:
RequireJS Site
Why use Web Modules
How to load Google Maps with Require JS
RequireJS Jquery Plugins