<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script>
angular.module('ngMap').controller('mapCtrl', function ($scope) {
$scope.open = function() {
$('#warningModal').modal('show');
}
$scope.vm={data:[],position:[]};
$scope.vm.data = [
{ foo: 1, bar: 1 },
{ foo: 2, bar: 2 },
{ foo: 3, bar: 3 },
{ foo: 4, bar: 4 },
{ foo: 5, bar: 5 },
{ foo: 6, bar: 6 },
{ foo: 7, bar: 7 }
];
$scope.vm.positions = [
{ pos: [40.71, -74.21] },
{ pos: [40.72, -74.20] },
{ pos: [40.73, -74.19] },
{ pos: [40.74, -74.18] },
{ pos: [40.75, -74.17] },
{ pos: [40.76, -74.16] },
{ pos: [40.77, -74.15] }
];
});
</script>
</head>
<body>
<div ng-controller="mapCtrl">
<div class="container">
<br>
<button class="btn btn-default" ng-click="open()">Open map!</button>
<br> <br>
<div id="warningModal" class="modal fade">
<div class="modal-dialog modal-lg" style="padding-top: 40px;">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5>Hakan Hakyemez's Map Modal</h5>
</div>
<div class="modal-body">
<ng-map zoom="11" center="[40.74, -74.18]">
<marker ng-repeat="p in vm.positions"
position="{{p.pos}}"
data="{{data[$index]}}"
on-click="showData()"
title="pos: {{p.pos}}"></marker>
</ng-map>
</div>
</div>
</div>
</div>
<ng-map zoom="11" center="[40.74, -74.18]">
<marker ng-repeat="p in vm.positions"
position="{{p.pos}}"
data="{{data[$index]}}"
on-click="showData()" ;
title="pos: {{p.pos}}"></marker>
</ng-map>
</div>
</div>
</body>
</html>
<!--Hakan HAKYEMEZ Ege University Computer Engineering-->
<!--Origin:https://ngmap.github.io/#/!marker_data_with_ng_repeat.html-->