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.

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)

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

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': '', 'jquery.bootstrap': '', '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('', 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=",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() {,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:
View the full config file:
View the source code:

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