angular.module('appMaps', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function($scope, uiGmapGoogleMapApi) {
$scope.map = {
center: {
latitude: 51.5286416,
longitude: -0.1015987
},
zoom: 12 };
$scope.options = {scrollwheel: false};
$scope.windowOpt = {
position: {
lat: 51.5286416,
lng: -0.1015987
},
show: true
}
$scope.showWindow = function() {
$scope.windowOpt.show = true;
}
$scope.doIt = function() {
alert("Action!");
}
$scope.list = [
{id: 1, content: "This is first item"},
{id: 2, content: "This is second item"},
{id: 3, content: "This is third item"}
]
});
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map bounds="map.bounds" center="map.center" zoom="map.zoom" options="options">
<ui-gmap-window options="windowOpt" show="windowOpt.show" closeClick="closeWindow">
<div class='map-popup'>
<div><a ng-click='doIt()' href='#'>Action</a></div>
<div ng-repeat="item in list">
{{item.content}}
</div>
</div>
</ui-gmap-window>
</ui-gmap-google-map>
</div>
<!--example-->
</body>
</html>
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}