- AngularJS : 1.2.23
- Bootstrap : 3.2.0
- Google Maps for AngularJS : 2.0.7
- include file angular.min.js, lodash.underscore.min.js, angular-google-maps.min.js, ui-bootstrap-tpls-0.11.0.min.js
{{machi}}
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/lodash.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 class = "container" ng-controller="MyCtrl"> <div class="row"> <div class="col-sm-12"> <ui-gmap-google-map id="map-canvas" center="map.center" zoom="map.zoom" draggable="true" options="map.options" control="map.control" events="map.events" > </ui-gmap-google-map> <div id="polygon-panel" class="well well-sm">{_{machi}}</div> <button id="ctrlBtn" class="btn btn-primary btn-xs" ng-class="{'btn-success': border}" ng-click="toPolygon()">toTownBorder </button> </div> </div> </div>
var mapApp = angular.module('googleMapApp', ['google-maps'.ns(),'ui.bootstrap']); mapApp.config(['GoogleMapApiProvider'.ns(), function (GoogleMapApi) { GoogleMapApi.configure({ key: 'your Google Map api key', v: '3.17', libraries: '' }); }]); mapApp.controller("MyCtrl",['$scope', 'GoogleMapApi'.ns(), function ($scope,GoogleMapApi) { var polygonPanel = document.getElementById('polygon-panel'); var featureStyle = { strokeColor: '#FF0000', strokeOpacity: 0.9, strokeWeight: 0.3, fillColor: '#FFFF00', fillOpacity: 0.1, }; angular.extend($scope, { map: { center: { latitude: 35.7012, longitude: 139.7140 }, options: { maxZoom: 20, minZoom: 3 }, zoom: 14, control: {}, events: { projection_changed: function (map, eventName, originalEventArgs) { var ctrlBtn = document.getElementById('ctrlBtn'); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ctrlBtn); map.data.loadGeoJson('../wp-content/themes/ang/js/shinjuku2.geojson'); map.data.setStyle({visible: false}); } } }, }); $scope.border = false; $scope.toPolygon = function () { if (!$scope.border) { $scope.map.control.getGMap().data.setStyle(featureStyle); $scope.map.control.getGMap().controls[google.maps.ControlPosition.BOTTOM_CENTER].push(polygonPanel); $scope.map.control.getGMap().data.addListener('mouseover', function(event) { $scope.machi = event.feature.getProperty('MOJI'); $scope.$apply(); }); } else { $scope.map.control.getGMap().data.setStyle({visible: false}); $scope.map.control.getGMap().controls[google.maps.ControlPosition.BOTTOM_CENTER].removeAt(0); } $scope.border = !$scope.border; return; }; }]);