angularjs - example - Ejemplo de trabajo de la función de búsqueda angular-google-maps.
google maps angular 6 (4)
La respuesta de Gavin es correcta, solo algunos detalles más sobre el ''searchbox.tpl.html de su ejemplo. Debe ser colocado fuera de la directiva de esta manera:
<body>
<div id="searchBoxParent"></div>
<div id="map_canvas" ng-controller="mainCtrl">
<script type="text/ng-template" id="searchbox.tpl.html">
<input type="text" placeholder="Search Box">
</script>
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-search-box template="searchbox.template" events="searchbox.events" parentdiv="searchbox.parentdiv"></ui-gmap-search-box>
</ui-gmap-google-map>
</div>
<!--example-->
</body>
Plunkr de trabajo: http://embed.plnkr.co/1rpXQhcZqwJ7rv0tyK9P/ (por alguna razón, el plunkr solo funcionó en Chrome para mí, pero no en Firefox)
No pude comentar sobre la respuesta de Gavin debido a la falta de reputación, por eso agrego la información como respuesta adicional.
¿Alguien tiene un ejemplo de un cuadro de búsqueda que funcione como el que muestra el equipo de google-maps-angular en el cuadro de búsqueda en este sitio? https://angular-ui.github.io/angular-google-maps/#!/api
Si escribes algo, seguro que lo encuentras en un menú desplegable, pero cuando presionas Intro, el mapa no responde. - ¿Cómo puede hacer que el mapa se mueva a la ubicación correcta cuando pulsa enter?
Le sugiero que mire los ejemplos enviados a github angular-google-maps .
Hay una pieza de JavaScript que falta en la respuesta 123Tax que se encuentra en https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/scripts/controllers/search-box.js
Y este fragmento se carga en https://github.com/angular-ui/angular-google-maps/blob/master/example/search-box.html
html:
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
<ui-gmap-search-box template="searchbox.template" events="searchbox.events" position="BOTTOM_RIGHT"></ui-gmap-search-box>
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-google-map>
controlador js:
$scope.map = {
"center": {
"latitude": 52.47491894326404,
"longitude": -1.8684210293371217
},
"zoom": 15
}; //TODO: set location based on users current gps location
$scope.marker = {
id: 0,
coords: {
latitude: 52.47491894326404,
longitude: -1.8684210293371217
},
options: { draggable: true },
events: {
dragend: function (marker, eventName, args) {
$scope.marker.options = {
draggable: true,
labelContent: "lat: " + $scope.marker.coords.latitude + '' '' + ''lon: '' + $scope.marker.coords.longitude,
labelAnchor: "100 0",
labelClass: "marker-labels"
};
}
}
};
var events = {
places_changed: function (searchBox) {
var place = searchBox.getPlaces();
if (!place || place == ''undefined'' || place.length == 0) {
console.log(''no place data :('');
return;
}
$scope.map = {
"center": {
"latitude": place[0].geometry.location.lat(),
"longitude": place[0].geometry.location.lng()
},
"zoom": 18
};
$scope.marker = {
id: 0,
coords: {
latitude: place[0].geometry.location.lat(),
longitude: place[0].geometry.location.lng()
}
};
}
};
$scope.searchbox = { template: ''searchbox.tpl.html'', events: events };
// the following controls the map in your Controller
$scope.map = { control: {}, center: { latitude: 37.70, longitude: -122.344 }, zoom: 9, refresh: {}};
function placeToMarker(searchBox, id) {
var place = searchBox.getPlaces();
if (!place || place == ''undefined'' || place.length == 0) {
return;
}
var marker = {
id: id,
place_id: place[0].place_id,
name: place[0].name,
address: place[0].formatted_address,
latitude: place[0].geometry.location.lat(),
longitude: place[0].geometry.location.lng(),
latlng: place[0].geometry.location.lat() + '','' + place[0].geometry.location.lng()
};
// push your markers into the $scope.map.markers array
if (!$scope.map.markers) {
$scope.map.markers = [];
}
// THIS IS THE KEY TO RECENTER/REFRESH THE MAP, to your question
$scope.map.control.refresh({latitude: marker.latitude, longitude: marker.longitude});
// the following defines the SearchBox on your Controller; events call placeToMarker function above
var searchBoxEvents = {
places_changed: function (searchBox) {
placeToMarker(searchBox, id);
}
};
// this is defined on the Controller, as well. This specifies which template searchBoxEvents should match to; note the parentdiv
$scope.searchBox = { template:''searchBox.template.html'', events:searchBoxEvents, parentdiv: ''searchBoxParent''};
// in your HTML, declare where you want the searchBox. parentdiv: ''searchBoxParent'' above looks for the id="searchBoxParent" in HTML
<div class="col-xs-12 col-md-12" id="searchBoxParent">
<script type="text/ng-template" id="searchBox.template.html">
<input type="text" ng-model="address" placeholder="Search Address" required />
</script>
</div>
//Lastly, in HTML, make sure you wrap ui-gmap-search-box & ui-gmap-markers in ui-gmap-google-map
<ui-gmap-google-map id="map-canvas" center="map.center" zoom="map.zoom" draggable="true" options="options" control="map.control">
<ui-gmap-search-box template="searchBox.template" events="searchBox.events" parentdiv="searchBox.parentdiv"></ui-gmap-search-box>
<ui-gmap-markers idkey="map.idkey" models="map.markers" coords="''self''" icon="''icon''" click="''onClicked''" fit="true"></ui-gmap-markers>
</ui-gmap-google-map>