How to add async, google map api as a dependencies?

[TrangNguyen]

Hi,

I need to use google map api on certain routes so I chose async. While it works well localhost, the production deployment does not: maps is undefined. I must be doing something wrong so if you could please guid me to the right direction, much help is greatly appreciated. I created a directive, as a part of commonModule, which is a dependency of the app:

define(['async!//maps.google.com/maps/api/js?v=3&sensor=false'], function(){
"use strict";
 //directive for address-based gmap, at the moment, initialized for the company's address
 var AddressBasedGMapDirective = function () {
    return {
        restrict: "A",
        template: "<div id='map-canvas'></div>",
        scope: {
            lat: "@",
            lng:"@",
            zoom: "="
        },
        controller: function ($scope) {
            var gmaps = window.google.maps;
            var latlng;
            var map;
            var marker;
            var initialize = function () {
                var lat = $scope.lat || 52.513335;
                var lng = $scope.lng || 13.397463;
                latlng = new gmaps.LatLng(lat, lng);                
                var mapOptions = {
                    zoom: $scope.zoom,
                    center: latlng,
                    mapTypeId:  gmaps.MapTypeId.ROADMAP,
                    disableDefaultUI: true
                }; 
                map = new  gmaps.Map
                (document.getElementById('map-canvas'), mapOptions);
                marker = new gmaps.Marker({
                    position:latlng,
                    draggable: false,
                    map:map
                });
                marker.setPosition(latlng);             
            };
         initialize();
        },
    };
 };

  return AddressBasedGMapDirective;
});

In the main.js, I added async:

//main.js
...
paths: {
...
'async': '../../../bower_components/requirejs-plugins/src/async',
}
...

Thank you very much. Trang

[TrangNguyen]

I realized async doesn't work out of the box with almond. Would you recommend any way to bind google maps API. Thanks.

[marcorinck]

Interesting. Didn't know anything about the async plugin til now.

The only time I used google maps myself in an SPA and requirejs environment was just a test project and I loaded it synchronsous via normal script tag.

I don't have any experience loading it asynchronous. Sorry!

[TrangNguyen]

Hi,

thanks for your reply. After digging in for a few hours I decided to wrap the google map api in to a service and then call it from the directive. I'll live with it for now, tight deadline.

I really like your ngStart, it's so nicely structured that our team (one for WordPress backend, me for Angular and a CSS developer) never step on each other's feet and find every new module added without problem. Thanks a lot fro all ground work.

[marcorinck]

Thank you very much for the compliment! Nice to hear that ngstart used somehwere.

I close the ticket for now. If you have a suggestion how your usecase can be integrated in ngstart feel free to open it again.