<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" data-require="google-maps@*" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" data-require="lodash-underscore@2.4.1" data-semver="2.4.1" src="https://rawgithub.com/lodash/lodash/2.4.1/dist/lodash.underscore.min.js"></script>
<script type="text/javascript" data-require="angular.js@1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<script type="text/javascript" data-require="angular-google-maps@*" data-semver="1.1.13" src="https://rawgithub.com/nlaplante/angular-google-maps/1.1.13/dist/angular-google-maps.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-app="appMap">
<div ng-controller="MapCtrl">
<google-map center="[0, 0]"
draggable="true"
zoom="map.zoom"
control="map.control"
events="map.events">
<markers models="places"
icon="'icon'"
doCluster="false"
coords="'self'"
events="marker.events"
options="marker.options"
control="marker.control">
</markers>
</google-map>
<ul>
<li ng-repeat="place in places">
<button ng-disabled="place.id === currentPlaceId" ng-click="selectMarker(place.id)">{{ 'marker id:' + place.id }}</button>
</li>
</ul>
</div>
</body>
</html>
app = angular.module('appMap', ['google-maps']);
app.controller('MapCtrl', function($scope, $timeout) {
var img_base64 = {
small: 'http://huisx.nl/images/reddot2.png',
//small: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFAUlEQVRYR7VXXWxTVRw/59x+rR+UTcZm24EhDMXJmNZltEwD2yC0TYxoRGP0gZioDxg0UdGokUQjGgMmRmL0gQcTgvMBQ6CtQ76SuW4Dl0UIA5zK5tptimN0dGvX9p7j/1x2tzJve2+nnqYP55z/x+//ef4XoyLW9ZYW+5R+6mmMsA8jVkcJruTshLJRRnAvYzSUHLt2qLr7lwmtYrEWQuZ260eWml5jBO0iGC8qxCMyGscU7XGEI3tBeFZNviqA/ofuLzdbzUeIgD1qwnLvGWPt8dTY1tUnL48V4isIYDDQWKqjrB2U1xSjXKaloni+JGN5uOzEiXg+/oIAogHvMQGTQC6zSCkaT02jRDqDpqmIMMPIIBBkNRpQqdGIBHK7SPDEt45gx2NFA4j6120TiK41l3EynUUjkwkkUqYoT8AYOWwWZNbrb7unlD7qDEWOKDHl9QBYfx6sXyMzJbNZNBRPIAY/vsCyMYpohFBwAiFeSM4yfg4VgpbZbcikE2b1MYZ6HMEfHtQM4Oqm+jqT0dgrM3CVAzcmUFoUpSPK2L7B0b63tg+gFN9/43KV3OG07REI2cn3RkFAd9mhWHLMS4uZmuXh7r75IBQ9EPWvfwViuU8m5vGO3UzIyg82dfU9o2TN6YbVhzAhT/E71yIrsuSEglJxhzPUuV8TgOGA5wuMhedl4j8np6TE4yuTFms39Vy+oATgeH11nUFnkDxXVmJC5eaSWTLw2mfOYMdLmgCAB1rBA9tk4uFEAt2czkjbM50X9bvzNBg4123w1EiENqgKh9Uyqw9y5iBUwz88pxiCYb/nK0yEZ2Xu0clJFE+lpW0qnXBs6RkcUfLA0bWrnDazPsrvFpsMqMIyB4AyesAZjDynyQMxv3c3IeRdmfgGKP8DQPBFRfp609lLHysBONVwz5uECB/wu0qrGdmhL8gL+sc7rlDkfU0Afvc1bNYL+jaZGOKHfh2P8+yHP03CP9DSfeV0rrDj9aua9UR3DBNsgpJEK0rtiPeFWQAibXaFI6c0AZAen0pjDGNSLjPwJOTJyJcIzx6mrBXKUxKICWphCD8BCgnfV1jMEII56ykTRx3Bziqlxyl/I/J734a6fi8XcW41KIWAn83P/pmwveEMRz5S4skL4Ee32+yoMF0Cly7LZeQ94a+pJJqeaUryHW8+S6DsrIb5bVi8+nPfyL0bBwakpqUpBDJRzLfuSSLovlZi5F0xLVKp2xmIID1ISiubzT5e9V3X4XweU50Hhn3r27GAG/MJKHQOuXLGFezYWIhGHUCg0Q0P0DnIbFXaXEUUSoWJmQdcbWd/+lcAOHPM5z1ABLK9GC8wJn4Jmf+CGo8mq35rvq/CaLT3E4JtagL5PZ8LkxPJ6ur23mtq9JoAzHhhF3jhQzWBEgCRvgpNZ68WWs0AQitXGmvvXtoHQ8qKQoIh8P2O0XQN7um59XqpLM0AuJyhLZ6tOp2Qt6Q4DRWzjzjDXUfVFMv3RQHgTFG/9yR0yCYlBZD53ztDHZu1Kud0RQMYavGsIQbcC6/l3NDHLYeRJytm1i5vO3fxfwXAhUNz+hya04u5irKU7a8KdewoRvmCPMCZrmxwL7GZjf0w/y3me3gcx+Op69VqX0FK4IoOgSwk6vO8LAjCJ1LiUboT5v5Pi7V+wR6QrOYzQ4XpAnwV0DuDkVotH6L/qQdulWWDH2HMqsJd4YVYz3n+Bnbl6DByLGqdAAAAAElFTkSuQmCC',
//big: 'data:image/png;base64,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'
big: 'http://huisx.nl/images/reddot1.png'
};
$scope.places = [{id:5262130,latitude:52.34985,longitude:4.88261,icon:img_base64.small},{id:2565685,latitude:52.35086,longitude:4.868575,icon:img_base64.small},{id:2204287,latitude:52.3495,longitude:4.88379,icon:img_base64.small},{id:5224846,latitude:52.34572,longitude:4.877543,icon:img_base64.small},{id:3754387,latitude:52.34975,longitude:4.879244,icon:img_base64.small},{id:5052270,latitude:52.34407,longitude:4.87429,icon:img_base64.small},{id:5052274,latitude:52.34407,longitude:4.87429,icon:img_base64.small},{id:1660247,latitude:52.34376,longitude:4.873905,icon:img_base64.small},{id:4802088,latitude:52.34186,longitude:4.874022,icon:img_base64.small},{id:4634588,latitude:52.347439,longitude:4.870012,icon:img_base64.small},{id:5251926,latitude:52.34744,longitude:4.870009,icon:img_base64.small},{id:5266390,latitude:52.3496,longitude:4.87,icon:img_base64.small},{id:4742990,latitude:52.346492,longitude:4.870712,icon:img_base64.small},{id:1299421,latitude:52.3472,longitude:4.8796,icon:img_base64.small},{id:660984,latitude:52.3471378,longitude:4.87931,icon:img_base64.small},{id:4725604,latitude:52.3471,longitude:4.87826,icon:img_base64.small},{id:4829643,latitude:52.345073,longitude:4.875631,icon:img_base64.small},{id:5094258,latitude:52.34649,longitude:4.880015,icon:img_base64.small},{id:1591397,latitude:52.34513,longitude:4.883148,icon:img_base64.small},{id:4721708,latitude:52.34619,longitude:4.883388,icon:img_base64.small},{id:1015936,latitude:52.34407,longitude:4.874383,icon:img_base64.small},{id:1530779,latitude:52.34274,longitude:4.872451,icon:img_base64.small},{id:1787219,latitude:52.3455732,longitude:4.8744046,icon:img_base64.small},{id:2274381,latitude:52.3471825,longitude:4.8850114,icon:img_base64.small},{id:2352605,latitude:52.3476341,longitude:4.8834213,icon:img_base64.small},{id:2568893,latitude:52.34713,longitude:4.878575,icon:img_base64.small},{id:2598347,latitude:52.34798,longitude:4.867927,icon:img_base64.small},{id:2964477,latitude:52.34626,longitude:4.884553,icon:img_base64.small},{id:3010781,latitude:52.3486,longitude:4.87986,icon:img_base64.small},{id:3104913,latitude:52.35112,longitude:4.876394,icon:img_base64.small},{id:3130467,latitude:52.347,longitude:4.88443,icon:img_base64.small},{id:3196281,latitude:52.34599,longitude:4.878054,icon:img_base64.small},{id:3246467,latitude:52.34376,longitude:4.875086,icon:img_base64.small},{id:3295503,latitude:52.35011,longitude:4.882539,icon:img_base64.small},{id:3437799,latitude:52.342,longitude:4.87254,icon:img_base64.small},{id:3441219,latitude:52.34222,longitude:4.87344,icon:img_base64.small},{id:3530813,latitude:52.34218,longitude:4.871509,icon:img_base64.small},{id:3530839,latitude:52.35056,longitude:4.881187,icon:img_base64.small},{id:3573675,latitude:52.34622,longitude:4.87951,icon:img_base64.small},{id:3644337,latitude:52.34536,longitude:4.875772,icon:img_base64.small},{id:3743791,latitude:52.3428,longitude:4.870342,icon:img_base64.small},{id:3819389,latitude:52.34967,longitude:4.874842,icon:img_base64.small},{id:3899167,latitude:52.34377,longitude:4.870698,icon:img_base64.small},{id:3923457,latitude:52.34398,longitude:4.87366,icon:img_base64.small},{id:3954713,latitude:52.34558,longitude:4.874845,icon:img_base64.small},{id:3965743,latitude:52.34796,longitude:4.868642,icon:img_base64.small}];
$scope.map = {
control: {},
zoom: 4,
events: {}
};
$scope.marker = {
control: {},
options: {
draggable: true,
},
events: {
dragend: function(marker, eventName, place) {
place.latitude = marker.getPosition().lat();
place.longitude = marker.getPosition().lng();
}
}
};
$scope.centerMap = function() {
var bounds = new google.maps.LatLngBounds();
for(var i = 0; i < $scope.places.length; i++) {
var place = $scope.places[i];
bounds.extend(new google.maps.LatLng(place.latitude, place.longitude));
}
$scope.map.control.getGMap().fitBounds(bounds);
};
$timeout(function() {
$scope.centerMap();
});
$scope.selectMarker = function(id) {
_($scope.places).forEach(function(place) {
if(place.id === id) {
$scope.currentPlaceId = id;
place.icon = img_base64.big;
}
else {
place.icon = img_base64.small;
}
});
}
});
/* Styles go here */
.angular-google-map-container {
width: 100%;
height: 300px;
}