Document how to compile with requirejs optimizer when using async plugin

[idflood]

Hi,

When using the async plugin to load google maps it become impossible to build and minify the project with the requirejs optimizer.

I've found a partial solution but it is missing something to be complete: http://techblog.realestate.com.au/loading-google-maps-with-requirejs/

[millermedeiros]

I use the async plugin on many projects. never had issues with the optimization, the async plugin should not be executed during build, see: https://github.com/millermedeiros/requirejs-plugins/blob/82f149ff628642892676763a39bc6aa6879dda72/src/async.js#L33-L35

[rmariuzzo]

I have the same problem... using the optimization, the dev console say:

ReferenceError: google is not defined

[alizbazar]

Have you found any sensible resolution? Facing the same problem...

[rmariuzzo]

@alizbazar, I couldn't use the async plugin successfully after the optimizer process...

[zawilliams]

Also having the same issue after the optimizer. Trying to find a solution.

[zawilliams]

@millermedeiros maybe I'm using the async plugin totally wrong in my project, but I'm doing a JSON call to an API and pulling in the data to a template. Should I be doing something different if this isn't meant for a build?

[zawilliams]

Ok so - found my issue was using Almond. Stopped using it and it worked with the build. Kind of a bummer, but it works now.

[resoliwan]

i have same issue but is not a requirejs-plugins problem

if u use shim config

check this https://github.com/jrburke/r.js/issues/623

after add option (wrapShim: true) at build.js

'ReferenceError: google is not defined' problem solved

ps.

if u not use deps property at shim config r.js can not find dependency for shim config

'shim': { 'vendor/jq-map/jquery.ui.map': {deps:['jquery', 'wishbeen/gmap']} }

[lagden]

Create a simple module (lazy load) That will work when you build using almond

Example

// lazy.js
define(function () {
    var h = document.getElementsByTagName('head')[0];
    function addScript(src, cb) {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = src;
        if (cb) {
            s.onload = cb;
        }
        h.insertBefore(s, h.lastChild);
    }
    return addScript;
});

Now load google maps API

// map.js
define(['lib/lazy'], function (lazy) {
    lazy((document.location.protocol === 'https:' ? 'https' : 'http') + '://www.google.com/jsapi', function () {
        google.load('maps', 3, {other_params: 'key=your-google-key', callback: initialize});
    });

    function initialize() {
        var ll = new google.maps.LatLng(29.9752502, 31.0675272);
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
            zoom: 17,
            center: ll,
            mapTypeControl: false,
            panControl: false,
            scrollwheel: false,
            zoomControl: true
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({
            position: ll,
            map: map,
            title: 'Sphinx'
        });
        var infowindow = new google.maps.InfoWindow({
            content: [
                '<div>',
                '<h3>Sphinx</h3>',
                '<p>Great Sphinx of Giza</p>',
                '</div>'
            ].join('')
        });
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
});