- AngularJS : 1.2.23
- Bootstrap : 3.x
- Google Maps for AngularJS : 1.0.16
- include file angular.min.js, underscore-min.js, angular-google-maps.min.js, ui-bootstrap-tpls-0.11.0.min.js
latitude,longitude {{ latitude | number:4 }}, {{ longitude | number:4 }}
Marker’s window
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=xxxxxxxxxxxxxxxxxx&sensor=false"></script> <script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/underscore-min.js'></script> <script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/angular-google-maps.min.js'></script> <script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/app.js'></script> <div ng-controller="MyCtrl"> <div class="row"> <div class="col-sm-12"> <google-map id="map-canvas" center="map.center" zoom="map.zoom" draggable="true" options="map.options" > <markers models="map.markers" coords="'self'" click="'onClicked'" labelContent="'title'" labelAnchor="22 0" > <windows show="'showWindow'" closeClick="'closeClick'"> <p ng-non-bindable>latitude,longitude {{ latitude | number:4 }, {{ longitude | number:4 }</p> <p>Marker's window</p> </windows> </markers> </google-map> </div> </div> </div>
var mapApp = angular.module('googleMapApp', ['google-maps','ui.bootstrap']); mapApp.controller("MyCtrl", function ($scope) { angular.extend($scope, { map: { center: { latitude: 35.681382, longitude: 139.766084 }, options: { maxZoom: 20, minZoom: 3 }, zoom: 16, markers: [ { latitude: 35.681382, longitude: 139.766084, showWindow: false, title: 'Tokyo Station' }, { latitude: 35.682032, longitude: 139.762294, showWindow: false, title: 'wadakuramon' }, { latitude: 35.678354, longitude: 139.761028, showWindow: false, title: 'babasakimon' } ] } }); angular.forEach($scope.map.markers, function (marker) { marker.closeClick = function () { marker.showWindow = false; $scope.$apply(); }; marker.onClicked = function () { marker.showWindow = true; $scope.$apply(); }; }); });