angular google maps lacks for search functionality

Question

I use the ng-map api in my project but I am stuck now because I am trying to find a search functionality where I can locate for example the gas stations around a specific coordinates but I can't find it so could anyone help me and guide me if should I continue with this library or not.

Answer 1

You could utilize PlacesService.nearbySearch function of Google Places API that:

Retrieves a list of places near a particular location, based on keyword or type.

The below example shows how to find and display gas stations within a certain radius:

angular.module('mapApp', ['ngMap'])

  .controller('mapController', function ($scope, NgMap, $http) {

    $scope.location = [59.3260668,17.8419725];

    NgMap.getMap().then(function (map) {
      $scope.map = map;


      var service = new google.maps.places.PlacesService($scope.map);
      var request = {
        location: new google.maps.LatLng($scope.location[0], $scope.location[1]),
        radius: '10000',
        types: ['gas_station']
      };
      service.nearbySearch(request, $scope.displayResults);
    });

    $scope.gasStations = [];
    $scope.displayResults = function (results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        $scope.$apply(function () {
          $scope.gasStations = results.map(function (item) {
            return {
              id: item.id, name: item.name, pos: [item.geometry.location.lat(), item.geometry.location.lng()]
            };
          });
        });
      }
    };


  });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="mapApp" ng-controller="mapController">
        
        <ng-map default-style="true" zoom="11" center="{{location}}">
            <marker ng-repeat="gs in gasStations" position="{{gs.pos}}" title="{{gs.name}}" id="{{gs.id}}">
            </marker>
        </ng-map>
</div>

Codepen