<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=xxxxxxxxxxxxxxxxxx&sensor=false&libraries=places"></script>
<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 ng-controller="MyCtrl">
<div class="row">
<div class="col-sm-9">
<google-map
id="map-canvas"
center="map.center"
zoom="map.zoom"
draggable="true"
options="map.options"
control="map.control"
event="map.event"
>
<marker ng-repeat="m in map.markers" idkey='m.id' coords="m" click="onMarkerClicked(m)">
<window show="m.showWindow"
closeClick="closeClick(m)"
templateUrl="m.templateUrl"
templateParameter="m.templateParameter"
>
</window>
</marker>
</google-map>
</div>
<div class="col-sm-3">
<H3 class="well well-sm">Place Text Search</H3>
<form class="form" role="form">
<div class="form-group">
<label class="control-label">Place text(ex.cafe)</label>
<input type="text" class="form-control" ng-model="place.query">
</input>
</div>
<div class="form-group">
<label class="control-label">radius(meters)</label>
<input type="text" class="form-control" ng-model="place.radius">
</input>
</div>
<button ng-click="placeSearch(place)" type="submit" class="btn btn-primary">submit</button>
<button class="btn btn-danger" ng-click="removeMarkers()">Clear Map</button>
</form>
</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,
control: {},
markers: []
},
place: '',
result: ''
});
$scope.placeSearch = function (place) {
var request = {
location: {
lat: $scope.map.center.latitude,
lng: $scope.map.center.longitude
},
radius: place.radius,
query: place.query
};
var map = $scope.map.control.getGMap();
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
return;
};
var callback = function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i],i);
}
}
}
var createMarker = function (place,id) {
$scope.map.markers.push({
id: id,
latitude: place.geometry.location.lat(),
longitude: place.geometry.location.lng(),
showWindow: false,
name: place.name,
templateUrl: 'assets/templates/place.html',
templateParameter: {
message: place.name
}
});
$scope.$apply();
}
$scope.closeClick = function (marker) {
marker.showWindow = false;
};
$scope.onMarkerClicked = function (marker) {
marker.showWindow = true;
};
$scope.removeMarkers = function () {
$scope.map.markers.length = 0;
};
});
<div>
<strong>Place</strong>
<div>
{ { parameter.message }}
</div>
</div>