Place searches
{{result}}
<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>
<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-8">
<ui-gmap-google-map
id="map-canvas"
center="map.center"
zoom="map.zoom"
draggable="true"
options="map.options"
control="map.control"
event="map.event"
>
<ui-gmap-marker ng-repeat="m in map.markers" idkey='m.id' coords="m" click="onMarkerClicked(m)">
<ui-gmap-window show="m.showWindow"
closeClick="closeClick(m)"
templateUrl="m.templateUrl"
templateParameter="m.templateParameter"
>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
<div class="col-sm-4">
<H4 class="well well-sm">Place searches</H4>
<form class="form" role="form">
<div class="form-group">
<label class="control-label">Place types(ex.finance)</label>
<input type="text" class="form-control" ng-model="place.types">
</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>
{{result}
</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: 'places'
});
}]);
mapApp.controller("MyCtrl",['$scope', 'GoogleMapApi'.ns(), function ($scope,GoogleMapApi) {
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,
types: [place.types]
};
var map = $scope.map.control.getGMap();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
return;
};
var callback = function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i
<div>
<strong>Place</strong>
<div>
{ { parameter.message }}
</div>
</div>