<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="map.templateUrl"
templateParameter="map.templateParameter"
>
</ui-gmap-window>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
<div class="col-sm-4">
<H4 class="well well-sm">Place Text Search</H4>
<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'.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: [],
templateUrl: 'assets/templates/place3.html',
templateParameter: {
name: '',
phone: '',
website: '',
html: '',
type: ''
}
},
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) {
var request = {
reference: place.reference
};
var detail = new google.maps.places.PlacesService($scope.map.control.getGMap());
detail.getDetails(request, function(result, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
$scope.map.markers.push({
id: id,
latitude: place.geometry.location.lat(),
longitude: place.geometry.location.lng(),
showWindow: false,
name: result.name,
phone: result.formatted_phone_number,
website: result.website,
html: result.html_attributions[0],
type: result.types.toString()
});
$scope.$apply();
}
});
}
$scope.closeClick = function (marker) {
marker.showWindow = false;
};
$scope.onMarkerClicked = function (marker) {
marker.showWindow = true;
$scope.map.templateParameter = {
name: marker.name,
phone: marker.phone,
website: marker.website,
html: marker.html,
type: marker.type
}
};
$scope.removeMarkers = function () {
$scope.map.markers.length = 0;
};
}]);
<div>
<strong>Place</strong>
<ul class="list-unstyled">
<li>{ { parameter.name }}</li>
<li>{ { parameter.phone }}</li>
<li>{ { parameter.website }}</li>
<li>{ { parameter.html }}</li>
<li>{ { parameter.type }}</li>
</ul>
</div>