ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
44 lines (42 loc) • 1.99 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>
<link href="custom-marker.css" rel="stylesheet" />
</head>
<body>
<script>
angular.module('myapp', ['ngMap']);
angular.module('myapp').controller('MyCtrl', function(NgMap){
var vm = this;
NgMap.getMap().then(function(map) {
vm.showCustomMarker= function(evt) {
map.customMarkers.foo.setVisible(true);
map.customMarkers.foo.setPosition(this.getPosition());
};
vm.closeCustomMarker= function(evt) {
this.style.display = 'none';
};
});
});
</script>
<div ng-controller="MyCtrl as vm">
<ng-map zoom="13" center="1600 pennsylvania ave, washington DC" style="height:600px"
on-center-changed="centerCustomMarker()">
<marker position="10 pennsylvania ave, washington DC" on-click="vm.showCustomMarker()"></marker>
<marker position="2600 pennsylvania ave, washington DC" on-click="vm.showCustomMarker()"></marker>
<custom-marker id="foo" position="10 pennsylvania ave, washington DC" on-click="vm.closeCustomMarker()">
<div>
<img width="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Donald_Trump_August_19%2C_2015_%28cropped%29.jpg/220px-Donald_Trump_August_19%2C_2015_%28cropped%29.jpg" align="left" /> Hi, How Are You? <br/>
My Name is Trump, and people call me as Mr. President.<br/>
We live in this house.<br/>
<br/>
<img width="300" src="http://cdn.cstatic.net/images/gridfs/53b42fd3f92ea17d970280b4/Screen%20Shot%202014-07-02%20at%2012.07.54%20PM.png" />
<br/>
If you want to visit us, please click <a href="https://www.whitehouse.gov">here</a>
</custom-marker>
</ng-map>
</div>
</body>
</html>