ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
116 lines (109 loc) • 3.08 kB
HTML
<html ng-app="ngMap">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<style>
.custom-marker {
}
.custom-marker.my1 {
font-size: 1.5em;
padding: 10px;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: #7F7F7F solid 1px;
}
.custom-marker.my1:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -6px;
bottom: -6px;
left: 50%;
}
.custom-marker.my1:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -7px;
left: 50%;
}
.custom-marker.my2 {
font-size: 1.5em;
padding: 10px;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: #7F7F7F solid 1px;
background: red;
}
.custom-marker.my2:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: red transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -6px;
bottom: -6px;
left: 50%;
}
.custom-marker.my2:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -7px;
left: 50%;
}
</style>
<script>
angular.module('ngMap').run(function($rootScope) {
$rootScope.mouseover = function() {
console.log('mouseover', this);
this.style.backgroundColor = 'grey';
};
$rootScope.mouseout = function() {
this.style.backgroundColor = 'white';
};
$rootScope.click = function() {console.log('click')};
$rootScope.customMarkers = [
{address: "1600 pennsylvania ave, washington DC", "class": "my1"},
{address: "600 pennsylvania ave, washington DC", "class": "my2"},
];
});
</script>
</head>
<body>
<div>
<ng-map zoom="13" center="1600 pennsylvania ave, washington DC">
<custom-marker ng-repeat="cm in customMarkers" position="{{cm.address}}"
on-mouseover="mouseover()" on-mouseout="mouseout()"
on-click="click()">
<div class="{{cm.class}}"><div> Custom Marker {{cm.class}}</div> </div>
</custom-marker>
</ng-map>
</div>
</body>
</html>