Skip to content

Instantly share code, notes, and snippets.

@horst80

horst80/maps.html

Created October 19, 2017 11:34
Show Gist options
  • Save horst80/4108d7707a69331cd436201955beca5f to your computer and use it in GitHub Desktop.
Save horst80/4108d7707a69331cd436201955beca5f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
maps.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lazy Loading Angular Google Maps</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/oclazyload/1.1.0/ocLazyLoad.min.js"></script>
<style type="text/css">
.angular-google-map-container {
height: 400px;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="DemoCtrl as demo">
<input type="button" ng-click="showMap()" value="Show Map">
<div id="mapWrapper"></div>
</div>
<script type="text/javascript">
angular.module('app', ["oc.lazyLoad"]).controller('DemoCtrl', function ($scope, $ocLazyLoad, $injector, $compile) {
$scope.map = {center: {latitude: 53.8979, longitude: 11.4516}, zoom: 10};
$scope.showMap = function() {
$ocLazyLoad.load({
name: "uiGmapgoogle-maps",
files: [
"https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.4.1/angular-google-maps.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/angular-simple-logger/0.1.7/angular-simple-logger.js"
]
}).then(function () {
var uiGmapGoogleMapApi = $injector.get("uiGmapGoogleMapApi");
// where to set my API key "AIzaSyCG0wcziwoyB0lV_CR8SkjRCKSeIL26g0U"?
uiGmapGoogleMapApi.then(function () {
var el = $compile("<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>")($scope);
angular.element(document.querySelector('#mapWrapper')).append(el);
});
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment