ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
70 lines (68 loc) • 2.9 kB
HTML
<html ng-app="myapp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
angular.module('myapp', ['ngMap']);
angular.module('myapp').controller('MyCtrl', function($interval, NgMap) {
var map, i=0, interval, chats = document.querySelectorAll('#chats li');
NgMap.getMap().then(function(evtMap) {
map = evtMap;
interval = $interval(talk, 2000);
});
var talk = function(){
var el = chats[i];
map.customMarkers.usa.setVisible(false);
map.customMarkers.can.setVisible(false);
map.customMarkers[el.className].setContent(el.innerHTML);
map.customMarkers[el.className].setVisible(true);
map.customMarkers[el.className].draw();
i++;
(i >= chats.length) && $interval.cancel(interval);
};
});
</script>
<link href="custom-marker.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="MyCtrl">
{{world}}
<ng-map zoom="2" center="toronto, canada" style="height:300px">
<custom-marker id="can" position="canada" on-click="click()">
<div><b>Hi, USA</b>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/2014-world-cup-flags/32/USA-icon.png" />
</div>
</custom-marker>
<custom-marker id="usa" position="united state of america">
<div><b>Hello, Canada</b>
<img src="http://icons.iconarchive.com/icons/gosquared/flag/32/Canada-flat-icon.png" />
</div>
</custom-marker>
</ng-map>
<ul id="chats">
<li class="usa"> <span><b>We are alike, right?</b></span>
<li class="can"> <span><b>Yes, we are</b></span>
<li class="usa"> <span><b>We have freedom of speech.</b></span>
<li class="can"> <span><b>Yes, we also have free market.</b></span>
<li class="usa"> <span><b>We have president.</b></span>
<li class="can"> <span><b>Hmm, Canada has prime minister.</b></span>
<li class="usa">
<span><b>We have freedom of guns!!!.</b><br/>
<img src="http://icons.iconarchive.com/icons/icons8/windows-8/64/Military-Firing-Gun-icon.png" width-="32"/>
</span>
<li class="can"> <span><b>...</b></span>
<li class="usa"> <span><b>...</b></span>
<li class="can">
<span>
<b>We have free health care!!!</b><br/>
<img src="http://icons.iconarchive.com/icons/gosquared/flag/64/Red-Cross-flat-icon.png" width="32" />
</span>
<li class="usa"> <span><b>...</b></span>
<li class="can"> <span><b>...</b></span>
<li class="usa"> <span><b>Bye Candaa</b></span>
<li class="can"> <span><b>Bye</b></span>
</ul>
</div>
</body>
</html>