AngularJS Example:
HTML
<script src="http://www.directiv.es/application/html/js/nlaplante/angular-google-maps/angular-google-maps.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="ExampleController">
<google-map
center="centerProperty"
zoom="zoomProperty"
markers="markersProperty"
latitude="clickedLatitudeProperty"
longitude="clickedLongitudeProperty"
mark-click="true"
draggable="true"
style="height: 450px; width: 100%">
</google-map>
</div>
</div>
CSS
.angular-google-map {
display: block;
}
JavaScript
var module = angular.module("myApp", ["google-maps"]);
function ExampleController ($scope) {
angular.extend($scope, {
centerProperty: {
lat: 22.11,
lng: 72.47
},
zoomProperty: 8,
markersProperty: [ {
latitude: 22.11,
longitude: 72.47
}],
clickedLatitudeProperty: null,
clickedLongitudeProperty: null,
});
}