<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-12">
<google-map
id="map-canvas"
center="map.center"
zoom="map.zoom"
draggable="true"
options="map.options"
control="map.control"
events="map.events"
>
<marker coords="map.marker" icon="map.marker.icon"
options="map.marker.options">
<window show="map.window.showWindow"
options="map.window.options"
templateUrl="map.window.templateUrl"
templateParameter="map.window.templateParameter"
>
</window>
</marker>
</google-map>
<div id="type-selector" class="well well-sm">
<form class="form-inline">
<div class="radio">
<label>
<input type="radio" name="type" id="changetype-all" checked>
All
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="type" id="changetype-establishment">
Establishments
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="type" id="changetype-geocode">
Geocodes
</label>
</div>
</form>
</div>
<input id="pac-input" class="form-control" type="text" placeholder="Enter a location">
</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: 15,
control: {},
marker: {},
window: {
showWindow: '',
templateUrl: 'http://www.example.com/wp/wp-content/themes/ang/assets/templates/place4.html',
templateParameter: {
name: '',
address: ''
},
options: {
pixelOffset: {
height: -50,
width: 20
}
}
},
events: {
projection_changed: function (map, eventName, originalEventArgs) {
var types = document.getElementById('type-selector');
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(35.690903370337175, 139.74145889282227),
new google.maps.LatLng(35.67166118960477, 139.780855178833)
);
var options = {
bounds: defaultBounds,
types: ['establishment']
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
$scope.map.marker.latitude = place.geometry.location.lat();
$scope.map.marker.longitude = place.geometry.location.lng();
$scope.map.marker.icon = place.icon;
$scope.map.window.showWindow = true;
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
$scope.map.window.templateParameter.name = place.name;
$scope.map.window.templateParameter.address = address;
});
var setupClickListener = function (id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
}
}
});
});