Loading Google Maps Asynchronously for angular-ui-maps

bite.coffee

'use strict'


reqModules = [
  'ui.router'
  'ui.map'

  'bitesApp.bites'
  'google-maps-sdk'
]

angular.module 'bitesApp.bite', reqModules

.config ($stateProvider) ->
  $stateProvider
    .state 'bite',
      url: "#{Settings.BASE_URL}bites/:biteId"
      templateUrl: '/app/layouts/empty.html'
      controller: 'bitesDetailController'

.controller 'bitesDetailController', ($scope, $stateParams, bitesBitesService, googleMapsService) ->
  googleMapsService.sdk().then (gMaps) ->
    console.log "hit"
    console.log gMaps

googleMapsSDK.coffee

'use strict'

angular.module 'google-maps-sdk', []

.factory 'googleMapsService', ($document, $q, $rootScope) ->
  sdkLoadDefer = $q.defer()

  window.onGoogleMapsLoad = ->
    $rootScope.$apply ->
      sdkLoadDefer.resolve(window.google.maps)
  

  scriptTag = $document[0].createElement "script"
  scriptTag.type = "text/javascript"
  scriptTag.async = true
  scriptTag.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleMapsLoad"

  body = $document[0].getElementsByTagName("body")[0]
  body.appendChild scriptTag

  sdk: ->
    sdkLoadDefer.promise