ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
63 lines (62 loc) • 2.33 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>
<script>
angular.module('ngMap').run(function($rootScope, NgMap) {
NgMap.getMap().then(function(map) {
$rootScope.map = map;
});
});
</script>
<style>
.ng-map-info-window {
background-color: navy;
color: #fff;
}
.ng-map-info-window div:first-child > div:nth-child(1) {
border-top-color: navy ;
}
.ng-map-info-window div:first-child > div:nth-child(3) div {
background-color: transparent ;
}
.ng-map-info-window div:first-child > div:nth-child(4) {
background-color: transparent ;
}
</style>
</head>
<body>
<div>
Info Windows<br/>
This example displays a marker at the center of Australia.
When the user clicks the marker, an info window opens.
<ng-map default-style="true" center="-25.363882,131.044922" zoom="4">
<marker id="foo" position="-25.363882,131.044922"
on-click="map.showInfoWindow('bar')">
</marker>
<info-window id="bar" visible-on-marker="foo">
<div ng-non-bindable>
<div id="siteNotice"></div>
<h1 id="firstHeading" class="firstHeading">Uluru</h1>
<div id="bodyContent">
<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large
sandstone rock formation in the southern part of the
Northern Territory, central Australia. It lies 335 km (208 mi)
south west of the nearest large town, Alice Springs; 450 km
(280 mi) by road. Kata Tjuta and Uluru are the two major
features of the Uluru - Kata Tjuta National Park. Uluru is
sacred to the Pitjantjatjara and Yankunytjatjara, the
Aboriginal people of the area. It has many springs, waterholes,
rock caves and ancient paintings. Uluru is listed as a World
Heritage Site.</p>
<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">
http://en.wikipedia.org/w/index.php?title=Uluru</a>
(last visited June 22, 2009).</p>
</div>
</div>
</info-window>
</ng-map>
</div>
</body>
</html>