- AngularJS : 1.6.5
- Google Maps for AngularJS : 2.4.1
- include file angular.min.js, lodash.underscore.min.js, angular-simple-logger.min.js,angular-google-maps.min.js
{{machi}}
<div 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', ['uiGmapgoogle-maps']); mapApp.config( ['uiGmapGoogleMapApiProvider', function(GoogleMapApiProviders) { GoogleMapApiProviders.configure({ key: 'your Google Map api key', v: '3', //defaults to latest 3.X anyhow libraries: 'weather,geometry,visualization,places' }); }] ); mapApp.controller("MyCtrl",['$scope', 'uiGmapGoogleMapApi', function ($scope,uiGmapGoogleMapApi) { 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/wp/json/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; }; uiGmapGoogleMapApi.then(function(maps) {}); }]);