Angular google map search box doesn't work on single click. required long press on result to work.
I have implemented angular google map in my ionic app.and its working fine but for search places we used angular google map search box .when we search like Gurgaon india its show results but when i click on any one then map don,t moving to that location .and when i long press to result then it works.
can u please help me .i need to work on click.
here is my code:
html file:
<script id="searchbox.tpl.html" type="text/ng-template">
<input type="text" class="card searchbar" placeholder="Search" id="pac-input"
data-tap-disabled="true" ng-change='disableTap()' ng-model="search" autocomplete="true" />
<label><i class="ion-ios-search"></i></label>
</script>
<ui-gmap-google-map center='map.center' draggable="true" zoom='map.zoom' options="map.options" control="map.control">
<ui-gmap-markers models="RefresherObj" coords="'location'" idKey="'_id'" options="partnerPointer" icon="'icon'" ></ui-gmap-markers>
<ui-gmap-search-box template="searchbox.template" events="searchbox.events" data-tap-disabled="true"></ui-gmap-search-box>
<ui-gmap-marker idKey="marker.id" coords="marker.coords" options="marker.options" icon="'icon'" events="marker.events"></ui-gmap-marker>
</ui-gmap-google-map>
controller:
angular.extend($scope, { searchbox: { template: 'searchbox.tpl.html', events: { click: function(searchbox, eventName, originalEventArgs) { console.log("searchbox",searchbox); console.log("eventName",eventName); console.log("originalEventArgs",originalEventArgs); console.log("originalEventArgs", originalEventArgs[0]); }, places_changed: function(searchbox, eventName, originalEventArgs) { console.log("searchbox1",searchbox.getPlaces()); console.log("eventName2",eventName); console.log("originalEventArgs2",originalEventArgs); showLoader(); var place = searchbox.getPlaces(); var newCenter = { latitude: place[0].geometry.location.lat(), longitude: place[0].geometry.location.lng() } $scope.marker = { coords: { latitude: place[0].geometry.location.lat(), longitude: place[0].geometry.location.lng() }, options: { draggable: true, icon: 'img/marker.png' } }
console.log("place", newCenter);
$scope.map.control.refresh(newCenter);
$ionicLoading.hide();
}
}
}
});
I had the same issue in my project at repo referenced above: https://github.com/werdnanoslen/gleanhub/search?utf8=%E2%9C%93&q=searchbox
Resolved with this: http://stackoverflow.com/a/36739953