angular-ui / angular-google-maps

AngularJS directives for the Google Maps Javascript API
http://angular-ui.github.io/angular-google-maps
2.52k stars 1.07k forks source link

Angular google map search box doesn't work on single click. required long press on result to work. #1900

Open preetam-yadav opened 7 years ago

preetam-yadav commented 7 years ago

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();
      }
    }
  }
});
werdnanoslen commented 7 years ago

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