<!DOCTYPE html>
<html>
<head>
<title>Directiva de Google Maps</title>
<link rel="stylesheet" href="style.css">
<script src="http://maps.google.com/maps/api/js?v=3.exp"></script>
</head>
<body ng-app="mapApp" ng-controller="mapCtrl as Map">
<div class="center">
<h1>Directiva de Google Maps</h1>
<md-google-maps lat="37.6443386" lng="-122.3793363" zoom="12" control="Map.control" options="Map.options"></md-google-maps>
<div class="buttons-bar">
<a ng-click="Map.control.addMarker()" class="button-add">Agregar Marker</a>
<a ng-click="Map.control.clearMarkers()" class="button-del">Eliminar Markers</a>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="libs/md-google-maps.js"></script>
<script src="script.js"></script>
</body>
</html>
(function () {
'use strict';
angular.module('mapApp', ['MdGoogleMaps'])
.controller('mapCtrl', Controller);
Controller.$inject = [];
function Controller() {
var vm = this;
vm.control = {};
vm.options = {
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
streetViewControl: true,
zoomControl: true
}
}
} ());
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #222;
font-family: sans-serif;
}
.buttons-bar {
display: -webkit-flex;
display: flex;
}
[class*="button-"] {
border: 1px solid;
color: #fff;
display: block;
-webkit-flex-grow: 1;
flex-grow: 1;
padding: .7em;
text-align: center;
}
.button-add {
background-color: #56AD56;
border-color: #3b873b;
}
.button-del {
background-color: #CD433D;
border-color: darkred;
}
.center {
left: 50%;
max-width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 600px;
}
#md-google-maps {
background: white;
border: 1px solid #bbb;
height: 300px;
margin: 10px 0;
}
h1 {
color: white;
font-weight: 400;
margin: 0;
text-align: center;
}
# Google Maps Directive with Angular 1.3+
This is a sample of how to create an angular directive for google maps, it only include some basic functions like setting control options and adding and removing markers dinamically.
(function () {
'use strict';
angular.module('MdGoogleMaps', [])
.directive('mdGoogleMaps', MdGoogleMaps);
MdGoogleMaps.$inject = [];
function MdGoogleMaps() {
return {
restrict: 'E',
replace: true,
scope: {
lat: '=',
lng: '=',
zoom: '=',
control: '=',
options: '='
},
template: '<div id="md-google-maps"></div>',
link: function(scope, element, attrs) {
var center = new google.maps.LatLng(scope.lat, scope.lng);
var zoom = scope.zoom || 12;
var mapSettings = {
center: center,
zoom: zoom
};
var map = {};
var arrMarkers = [];
initialize();
function addMarker() {
arrMarkers.push(new google.maps.Marker({
position: map.getCenter(),
map: map
}));
}
function clearMarkers() {
if (arrMarkers.length === 0) return;
angular.forEach(arrMarkers, function(marker) {
marker.setMap(null);
});
arrMarkers = [];
}
function initialize() {
if(undefined !== scope.options)
mapSettings = _.merge(mapSettings, scope.options);
map = new google.maps.Map(element[0], mapSettings);
if(undefined !== scope.control) {
scope.control.addMarker = addMarker;
scope.control.clearMarkers = clearMarkers;
}
}
}
}
}
} ());