angularjs - How to relocate marker with ng-autocomplete -


i separated map initialize function , ng-autocomplete 2 directive

one called my-map , other 1 ng-autocomplete

my goal relocate marker while click prediction of autocomplete

but unable pass basic variable my-map directive

ng-autocomplete directive

so how relocate marker? please ! !

angular.module( "mapdirective", [])  .directive('mymap', function() {          return {        restrict: 'a',              link: function(scope, element, attrs) {                    // var map, infowindow;        var markers = [];                var latlng = new google.maps.latlng(23.5,121);          var map,config;                var options = {           zoom: 7,          center: latlng,          maptypeid: google.maps.maptypeid.roadmap,          streetviewcontrol: false        };            //init map        function initmap() {            if (map === void 0) {                map = new google.maps.map(element[0], options);            }        }                    // place marker        function setmarker(map, position, title, content) {            var marker;            var markeroptions = {                position: position,                map: map,                title: title,                icon: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'            };              var marker = new google.maps.marker(markeroptions);            markers.push(marker); // add marker array                        google.maps.event.addlistener(marker, 'click', function () {                // close window if not undefined                if (infowindow !== void 0) {                    infowindow.close();                }                // create new window                var infowindowoptions = {                    content: content                };                infowindow = new google.maps.infowindow(infowindowoptions);                infowindow.open(map, marker);            });        }                // show map , place markers        initmap();                setmarker(map, new google.maps.latlng(23.5,121), 'my location', 'just content');                 } //link function    } //return          })  .directive('ngautocomplete', function() {    return {      require: 'ngmodel',          scope: {        ngmodel: '=',        options: '=?',        details: '=?',          },        link: function(scope, element, attrs, controller) {                         //options autocomplete        var opts        var watchenter = false        //convert options provided opts        var initopts = function() {            opts = {}          if (scope.options) {              if (scope.options.watchenter !== true) {              watchenter = false            } else {              watchenter = true            }              if (scope.options.types) {              opts.types = []              opts.types.push(scope.options.types)              scope.gplace.settypes(opts.types)            } else {              scope.gplace.settypes([])            }              if (scope.options.bounds) {              opts.bounds = scope.options.bounds              scope.gplace.setbounds(opts.bounds)            } else {              scope.gplace.setbounds(null)            }              if (scope.options.country) {              opts.componentrestrictions = {                country: scope.options.country              }              scope.gplace.setcomponentrestrictions(opts.componentrestrictions)            } else {              scope.gplace.setcomponentrestrictions(null)            }          }        }          if (scope.gplace == undefined) {          scope.gplace = new google.maps.places.autocomplete(element[0], {});        }        google.maps.event.addlistener(scope.gplace, 'place_changed', function() {          var result = scope.gplace.getplace();                      if (result !== undefined) {            if (result.address_components !== undefined) {  //點一下對的地址                scope.$apply(function() {                  scope.details = result;                  controller.$setviewvalue(element.val());                // couldn`t map variable other directive relocate marker                                console.log('result',result)                  var place = result;                var mapcenter = place.geometry.location;                map.setcenter(place.geometry.location);                map.setzoom(17);  // why 17? because looks good.                                marker.seticon(/** @type {google.maps.icon} */({                    url: 'http://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png',                    size: new google.maps.size(71, 71),                    origin: new google.maps.point(0, 0),                    anchor: new google.maps.point(17, 34),                    scaledsize: new google.maps.size(35, 35)                }));                    //-------------------------------------------------//               });            }            else {              if (watchenter) {                getplace(result)              }            }          }        })          //function retrieve autocompletes first result using autocompleteservice         var getplace = function(result) {          // console.log('result',result)          var autocompleteservice = new google.maps.places.autocompleteservice();          if (result.name.length > 0){            autocompleteservice.getplacepredictions(              {                input: result.name,                offset: result.name.length              },              function listentoresult(list, status) {                if(list == null || list.length == 0) {                    scope.$apply(function() {                    scope.details = null;                  });                  } else {                  var placesservice = new google.maps.places.placesservice(element[0]);                  placesservice.getdetails(                    {'reference': list[0].reference},                    function detailsresult(detailsresult, placesservicestatus) {                                     if (placesservicestatus == google.maps.geocoderstatus.ok) {                        scope.$apply(function() {                            controller.$setviewvalue(detailsresult.formatted_address);                          element.val(detailsresult.formatted_address);                            scope.details = detailsresult;                            //on focusout value reverts, need set again.                          var watchfocusout = element.on('focusout', function(event) {                            element.val(detailsresult.formatted_address);                            element.unbind('focusout')                          })                          });                      }                    }                  );                }              });          }        }          controller.$render = function () {          var location = controller.$viewvalue;          element.val(location);        };          //watch options provided directive        scope.watchoptions = function () {          return scope.options        };        scope.$watch(scope.watchoptions, function () {          initopts()        }, true);          }    };  });
<div class="step_map_box"  ng-controller="mapctrl ctrl">    <div class="address_input_row row">  <div class="address_input_box col-md-4 col-md-offset-4">        <input type="text" class="demo_insert form-control address_input" id="demo_address_input"             ng-class="ctrl.addressinput(ctrl.step()==1)"             ng-required="false"                ng-model="ctrl.newitem.address"             ng-autocomplete="ctrl.newitem.address"             marker = "ctrl.map.marker"             ch-input-width              >  </div>  </div>  <div id="step_map" class="step_map" ng-style="ctrl.mapinview(ctrl.step()==1)" my-map></div>    </div>


Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -