Search Input box outside the map in ionic modal rendering twice

[jammy525]

I am using ionic modal to show map. And using searchbox outside the map.My issue is that its rendering the search input box twice and not working properly.Please someone help me. _Controller code: _

$scope.place = { name : '', address: '', "location": { "lat": '', "lng": '' } }; var events = { place_changed:function (searchBox) { var placeSerached = searchBox.getPlace(); console.log('place',placeSerached); if (!placeSerached || placeSerached == 'undefined' || placeSerached.length == 0) { console.log('no place data :('); return; } $scope.map = { center:{ latitude : $scope.place.location.lat = placeSerached.geometry.location.lat(), longitude : $scope.place.location.lng = placeSerached.geometry.location.lng() }, zoom:12 }; ` $scope.marker = { id:0, options:{ draggable:true }, coords:{ latitude : $scope.place.location.lat = placeSerached.geometry.location.lat(), longitude : $scope.place.location.lng = placeSerached.geometry.location.lng() }, events: { dragend: function (marker, eventName, args) { $scope.place.location.lat = marker.getPosition().lat(); $scope.place.location.lng = marker.getPosition().lng();

            console.log('latlong1',$scope.place.location.lat,$scope.place.location.lng);

            $scope.marker.options = {
              draggable: true
            };
          }
        }
      };

    }
  };

$scope.searchbox = { template :'templates/google-searchbox-template.html', parentdiv:'searchBoxParent', events : events, options:{ autocomplete:true, componentRestrictions:{ country code. } } }; navigator.geolocation.getCurrentPosition(function (position) { $scope.place.location.lat = position.coords.latitude; $scope.place.location.lng = position.coords.longitude;

    $scope.map = {
      center: {
        latitude: $scope.place.location.lat,
        longitude: $scope.place.location.lng
      },
      zoom: 16
    };
    $scope.options = {disableDefaultUI: true};

    $scope.marker = {
      id: 0,
      coords: {latitude: $scope.place.location.lat, longitude: $scope.place.location.lng},
      options: {draggable: true},
      events: {
        dragend: function (marker, eventName, args) {
          $scope.place.location.lat = marker.getPosition().lat();
          $scope.place.location.lng = marker.getPosition().lng();

          console.log('latlong', $scope.place.location.lat, $scope.place.location.lng);

          $scope.marker.options = {
            draggable: true,
          };
        }
      }
    };
  });

` thanks in advance.

[jammy525]

View code:

   ' <ui-gmap-google-map refresh="true" center="map.center" zoom="map.zoom" draggable="true" options="options">

      <ui-gmap-search-box template="searchbox.template" parentdiv="searchbox.parentdiv" events="searchbox.events" options="searchbox.options">
      </ui-gmap-search-box>

      <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
      </ui-gmap-marker>

    </ui-gmap-google-map>`

[davidpelayo]

@jammy525 I've added ISSUE_TEMPLATE.md so there explains how to report a potential bug better.

Please provide detailed info, as per the ISSUE_TEMPLATE, including jsbins/plunkr/jsfiddle in order to help you better.

Thanks.