ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
44 lines (39 loc) • 1.36 kB
HTML
<html ng-app="myApp">
<head>
<title>Markers with parent controller(scope)</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('childController', function() {});
app.controller('parentController', function() {});
app.controller('parentParentController', function($http, NgMap) {
NgMap.getMap().then(function(map) {
var markers = [];
for (var i = 0; i < 8; i++) {
markers[i] = new google.maps.Marker({ title: "Marker: " + i });
var lat = 43.6600000 + (Math.random() / 100);
var lng = -79.4103000 + (Math.random() / 100);
var loc = new google.maps.LatLng(lat, lng);
markers[i].setPosition(loc);
markers[i].setMap(map);
}
}, 1000);
});
</script>
<style>
map, div[map] {display:block; width:600px; height:400px;}
</style>
</head>
<body>
<h1>Markers with parent controller(scope)</h1>
<div ng-controller="parentParentController as vm">
<div ng-controller="parentController">
<div ng-controller="childController">
<ng-map zoom="14" center="[43.6650000, -79.4103000]"></ng-map>
</div>
</div>
</div>
</body>
</html>