title: how to get a particular location on google maps with markers from a angular dropdown list
body: <p>I am trying to do some location search on google maps,its like i am having a angular multi-select drop-down where i am having several locations, if i select a single  location or more ,i have to show them on maps using markers,and how to get our current location any suggestions on how to do it please.</p>
  
  <p><strong>Dropdown code</strong> </p>
  
  <pre><code>&lt;div class="m-r" 
       ng-dropdown-multiselect="" 
       options="locations"  
       selected-model="search.locations" 
       extra-settings="multiSelectSettingsFunction" 
       translation-texts ="locationsTexts"  
       settings="selectSettings"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Google maps code</strong></p>
  
  <pre><code>&lt;ui-gmap-google-map center="map.center" refresh="true" zoom="map.zoom" draggable="true" data-tap-disabled="true"&gt;
      &lt;ui-gmap-window show="map.window.show" coords="map.window.model" options="map.window.options" closeClick="map.window.closeClick()"&gt;
          &lt;div style="color: black" background-color="#337ab7"&gt;
              {{map.window.title}}
              {{map.window.venue}}
          &lt;/div&gt;
      &lt;/ui-gmap-window&gt;
      &lt;ui-gmap-markers idkey="marker.id" models="map.markers" coords="'self'" doCluster="false" fit="'true'" icon="'icon'" events="map.markersEvents " options="'options'"&gt;&lt;/ui-gmap-markers&gt;
  
  &lt;/ui-gmap-google-map&gt;
  </code></pre>
  
  <p><strong>controller.js</strong> </p>
  
  <pre><code>app.controller("MainController", [ '$anchorScroll', '$scope', '$http', '$modal', '$log', '$timeout', '$location', '$rootScope', '$window','$mdSidenav' , function ($anchorScroll, $scope, $http, $modal, $log, $timeout, $location, $rootScope, $window,$mdSidenav) {
    $scope.searchBack = window.sessionStorage.searchBack;
    $scope.search = {
        pax: '',
        data: '',         
        locations : [],
        distance  : []
    }
  
    $scope.$watch('search.locations', function(newVal, oldVal){
        //console.log(newVal);
        //$scope.setSearch();
    }, true);
  
    $scope.locationsTexts = {
        buttonDefaultText: 'Locations',
        dynamicButtonTextSuffix: 'Locations',
    }
  
    $scope.multiSelectSettings = {
          displayProp: 'locations',
          idProp: 'locations',
          scrollableHeight: '256px',
          scrollable: true,
          enableSearch: true,
          buttonDefaultText: 'asd',
          dynamicButtonTextSuffix: 'Locations',
          //showCheckAll: false, 
     };
  
  $scope.locations = [                  
    {id: 1, label: "kothapet"}, 
    {id: 2, label: "Dsnr"}, 
    {id: 3, label: "Malakpet"},
    {id: 4, label: "Chadarghat"}, 
    {id: 5, label: "Koti"}, 
    {id: 6, label: "abids"}
  
    ];
  </code></pre>
  
  <p><strong>Maps Controller</strong></p>
  
  <pre><code>app.controller('MapController2', function($scope, $rootScope, $http) {
          var data = {};
  
          data.map = {
              zoom: 16,
              center: {
                latitude: 17.399,
                longitude: 78.52
              },
              markers: [
                  {
                      id: 1,
  
                      latitude: 17.3762,
                      longitude: 78.5461,
                      title: 'Location:Nagole',
                      venue:'Venue: Ng builders'
                  },
                  {
                      id: 2,
                      latitude: 17.3710,
                      longitude: 78.5410,
                      title: 'Location:Kothapet',
                      venue:'Venue: A Builders'
                  },
                  {
                      id: 3,
                      latitude: 17.3688,
                      longitude: 78.5247,
                      title: 'Location:Dilsukhnagar',
                      venue:'Venue: B Builders'
                  },
                  {
                      id: 4,
                      latitude: 17.3667,
                      longitude: 78.500,
                      title: 'Location:Malakpet',
                      venue:'Venue: C Builders'
                  }],
              markersEvents: {
                  click: function(marker, eventName, model, arguments) {
                      console.log('Marker was clicked (' + marker + ', ' + eventName);//+', '+mydump(model, 0)+', '+mydump(arguments)+')');
                      $scope.map.window.model = model;
                      $scope.map.window.model = model;
                      $scope.map.window.title = model.title;
                      $scope.map.window.venue = model.venue;
                      $scope.map.window.show = true;
                  }
              },
              window: {
                  marker: {},
                  show: false,
                  closeClick: function() {
                      this.show = false;
                  },
                  options: {}, // define when map is ready
                  title: ''
  
              }
          };
  
          //$scope.window = false;
  
          $scope.onMarkerClicked = function (m) {
              //this.windowOptions = !this.windowOptions;
              console.log('Marker was clicked');
              console.log(m);
          };
  
          $scope.closeClick = function () {
              this.window = false;
          };
  
          $scope.map = data.map;
  
  
  
  
  
      });
  </code></pre>