Skip to content

Instantly share code, notes, and snippets.

@fraserxu
Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fraserxu/7b12bfb43fdb67fbce2c to your computer and use it in GitHub Desktop.
Save fraserxu/7b12bfb43fdb67fbce2c to your computer and use it in GitHub Desktop.
async load google map api demo
doctype html
html(lang="en")
head
title Map App
body(ng-app="mapApp" animation="slide-left-right-ios7")
ion-nav-bar.bar-light.shadow
ion-nav-view(id="main")
//- use init-map directive here
init-map
//- map directive here
map
angular.module 'app.map', []
###
Init map directive
Use this in your template
###
.directive 'initMap', ($window, $rootScope, $timeout) ->
return {
restrict: 'E'
link: (scope, element, attr) ->
# map callback function
$window.mapInitialize = ->
$rootScope.$broadcast 'mapInitialzied'
# load script on window loaded
$window.loadScript = ->
script = document.createElement "script"
script.type = "text/javascript"
script.src = "https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE&sensor=true&" +
"callback=mapInitialize"
document.body.appendChild script
$window.onload = loadScript
}
###
Map directive
###
.directive 'map', (Map, $rootScope, $window) ->
return {
restrict: 'E'
scope:
onCreate: '&'
link: (scope, element, attr) ->
###
load map when map is initialized
###
loadMap = ->
mapOptions =
zoom: 15
mapTypeId: $window.google.maps.MapTypeId.ROADMAP
disableDefaultUI: true
# create map instance
map = new $window.google.maps.Map element[0], mapOptions
scope.onCreate { map: map }
initialize = ->
# listen on map initialized event
if not $window.google or not $window.google.maps
$rootScope.$on 'mapInitialzied', ->
loadMap()
else
loadMap()
initialize()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment