Как установить карту infowindow с помощью html и angularjs

Question

Привет, я новичок в html и angularjs, я делаю dmeo на маркерах карт Google, я успешно получил маркер на карте, но теперь я хочу поставить инфу маркер, я искал многие вещи, но не вписывался в мой сценарий, SO мог бы кто-нибудь помочь мне, как поставить infowindow на маркер карты, мой код выглядит следующим образом. HTML

<div class="mapclass"> 

     <ons-row class="app-map"> 
     <ons-col> 
      <map center="[{{lat}}, {{lng}}]"> 
      <marker ng-model 
       position="[{{lat}}, {{lng}}]" 
       title= "{{tittle}}" 
       animation="Animation.BOUNCE" 
       visible="true" ></marker> 
      </map> 
     </ons-col> 
     </ons-row> 
    </div> 

JS

app.controller('listingdetailController', function ($http, $scope, $compile, $filter, $sce,$timeout) { 

     var SearchTxt = 'cay'; 
     var url = encodeURI("http://www.yahoo.com"); 
     var page = gallery.getCurrentPage(); 
     var FkCategory = page.options.params; 
     var lat=''; 
     var lng = ''; 
     var img = ''; 
      var share = ''; 
     var title = ''; 
      var phone = ''; 
     var web = ''; 
     var email = ''; 
     var about=''; 
     var help=''; 
     var Info=''; 
     var Service=''; 
      $timeout(callAtTimeout, 1000); 


      function callAtTimeout() { 
      console.log("Timeout occurred"); 


      share = $scope.share; 
//   console.log("===iside details======"+FkCategory); 
     $scope.img = "http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/papagallo1438959641.jpg"; 

     $http({ 
      method: 'POST', 
      url: API_HOST+'/webservice/listingdetail', 
      headers: 
        { 
         'Content-Type': 'application/x-www-form-urlencoded', 
         'caymanauth': caymanauth 
        }, 
      data: "&Catid=" + FkCategory + "&SearchTxt=" + SearchTxt, 
      contentType: 'application/x-www-form-urlencoded' 
     }).success(function (data) 
     { 
      var i; 
      var Content = ' '; 
      for (i = 0; i<data['Details'].length; i++) 
      { 
       lat = + data['Details'][i]['varLatitude']; 
       lng = + data['Details'][i]['varLongitude']; 
       img = data['Details'][i]['varCompanyLogo']; 
       title = data['Details'][i]['varTitle']; 

       about= data['Details'][i]['varDescBusiness']; 
       help= data['Details'][i]['varMetaDescription']; 
       Info= data['Details'][i]['varSpecials']; 
       Service= data['Details'][i]['varDescBusiness']; 
       share = data['Details'][i]['varFacebookLink']; 

       $scope.about = about; 
       $scope.help = help; 
       $scope.Info = Info; 
       $scope.Service = Service; 
      $scope.title = title; 
      $scope.photo = ("http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/"+img); 
      $scope.lat = lat; 
      $scope.lng= lng; 
      $scope.geo = { lat: lat, lng: lng }; 
      $scope.phone= data['Details'][i]['varPhone']; 
       $scope.web= data['Details'][i]['varWebsiteLink']; 
       $scope.email= data['Details'][i]['varBusinessEmail']; 
      phone = $scope.phone; 
      web = $scope.web; 
      email = $scope.email; 
      share = $scope.share; 



       if (Content === ' ') 
       { 
        Content =      
    '<ons-list class="list ons-list-inner" style="border-top: none;">' + 

      '<ons-list-item class="list__item ons-list-item-inner">'+ 
      '<ons-row class="detail-row row ons-row-inner">'+ 
       '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ 
        '<ons-icon fixed-width="true" icon="fa-map-marker" class="ons-icon fa-map-marker fa fa-lg">'+'</ons-icon>'+ 
       '</ons-col>'+ 
       '<ons-col class="col ons-col-inner">'+ 
       '<div class="desc">'+ data['Details'][i]['varCityName']+'</div>'+ 
       '</ons-col>'+    
      '</ons-row>'+ 
      '</ons-list-item>'+ 

      '<ons-list-item class="list__item ons-list-item-inner">'+ 
      '<ons-row class="detail-row row ons-row-inner">'+ 
       '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ 
       '<ons-icon fixed-width="true" icon="ion-home" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>'+    
       '</ons-col>'+ 
       '<ons-col class="col ons-col-inner">'+ 
       '<div class="desc">'+ data['Details'][i]['varPhysicalAddress'] + '</div>'+ 
       '</ons-col> '+    
      '</ons-row>'+ 
      '</ons-list-item>'+  

      '<ons-list-item class="list__item ons-list-item-inner">'+ 
      '<ons-row class="detail-row row ons-row-inner">'+ 
       '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ 
       '<ons-icon fixed-width="true" icon="ion-soup-can" class="ons-icon ons-icon--ion ion-soup-can fa-lg">'+ 
       '</ons-icon>'+    
       '</ons-col>'+ 
       '<ons-col class="col ons-col-inner">'+ 
       '<div class="desc">' + data['Details'][i]['varPOBOXAddress']+'</div>'+ 
       '</ons-col>'+    
      '</ons-row>'+ 
      '</ons-list-item>'+ 
      '</ons-list>'+ 

      '<div class=caw-botton>'+ 
      '<ons-row class="row ons-row-inner">'+ 

       '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+ 
       '<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+ 
        '<i class="ion-compose">'+'</i>Book Now</div>'+ 
       '</ons-col>'+ 

       '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("review.html");>'+ 
        '<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+ 
        '<i class="ion-edit">'+ 
        '</i>Write a Review</div>'+ 
       '</ons-col>'+ 

       '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("email-friend.html");>'+ 
        '<div style="padding: 12px 0; background: #0ad046; color: #FFF;">'+ 
        '<i class="ion-ios-email">'+ 
        '</i>Email-friend</div>'+ 
       '</ons-col>'+ 

      '</ons-row>'+ 
       ' </div>'; 

       } 

       else 
       { 

    '<ons-list class="list ons-list-inner" style="border-top: none;">' + 

      '<ons-list-item class="list__item ons-list-item-inner">'+ 
      '<ons-row class="detail-row row ons-row-inner">'+ 
       '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ 
        '<ons-icon fixed-width="true" icon="fa-map-marker" class="ons-icon fa-map-marker fa fa-lg">'+'</ons-icon>'+ 
       '</ons-col>'+ 
       '<ons-col class="col ons-col-inner">'+ 
       '<div class="desc">'+ data['Details'][i]['varCityName']+'</div>'+ 
       '</ons-col>'+    
      '</ons-row>'+ 
      '</ons-list-item>'+ 

      '<ons-list-item class="list__item ons-list-item-inner">'+ 
      '<ons-row class="detail-row row ons-row-inner">'+ 
       '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ 
       '<ons-icon fixed-width="true" icon="ion-home" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>'+    
       '</ons-col>'+ 
       '<ons-col class="col ons-col-inner">'+ 
       '<div class="desc">'+ data['Details'][i]['varPhysicalAddress'] + '</div>'+ 
       '</ons-col> '+    
      '</ons-row>'+ 
      '</ons-list-item>'+  

      '<ons-list-item class="list__item ons-list-item-inner">'+ 
      '<ons-row class="detail-row row ons-row-inner">'+ 
       '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ 
       '<ons-icon fixed-width="true" icon="ion-soup-can" class="ons-icon ons-icon--ion ion-soup-can fa-lg">'+ 
       '</ons-icon>'+    
       '</ons-col>'+ 
       '<ons-col class="col ons-col-inner">'+ 
       '<div class="desc">' + data['Details'][i]['varPOBOXAddress']+'</div>'+ 
       '</ons-col>'+    
      '</ons-row>'+ 
      '</ons-list-item>'+ 
      '</ons-list>'+ 

      '<div class=caw-botton>'+ 
      '<ons-row class="row ons-row-inner">'+ 
       '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+ 
       '<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+ 
        '<i class="ion-compose">'+'</i>Book Now</div>'+ 
       '</ons-col>'+ 
       '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("review.html");>'+ 
        '<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+ 
        '<i class="ion-edit">'+ 
        '</i>Write a Review</div>'+ 
       '</ons-col>'+ 

       '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("email-friend.html");>'+ 
        '<div style="padding: 12px 0; background: #0ad046; color: #FFF;">'+ 
        '<i class="ion-ios-email">'+ 
        '</i>Email-friend</div>'+ 
       '</ons-col>'+ 

      '</ons-row>'+ 
       ' </div>'; 
         } 
      } 

      $scope.show1 = true; 
      $scope.show1 = function(){ 

       $scope.show2 = false; 
       $scope.show3 = false; 
        $scope.show4 = false; 
      }; 
       $scope.show2 = true; 
      $scope.show2 = function(){ 

       $scope.show1 = false; 
       $scope.show3 = false; 
        $scope.show4 = false; 
      }; 
      $scope.show3 = true; 
      $scope.show3 = function(){ 

       $scope.show1 = false; 
       $scope.show2 = false; 
        $scope.show4 = false; 
      }; 
      $scope.show4 = true; 
       $scope.show4 = function(){ 

       $scope.show1 = false; 
       $scope.show2 = false; 
        $scope.show3 = false; 
      }; 



     $scope.openChildWindow = function() { 

    window.open(web, '_blank', 'location=yes'); 
}; 
      $scope.snippet = Content; 

     }).error(function() 
     { 
      alert("error"); 
     }); 

     $scope.sendEmail = function(subject, body){ 
     var link = "mailto:"+ email 
       + "&subject=New email " + escape(subject); 
       + "&body=" + escape(body); 

     window.location.href = link; 
    }; 

     $scope.call = function() 
     { 
      parent.location.href = "tel:"+phone; 
     }; 

     $scope.openWebsite = function() 
     { 
      window.open(web, '_blank', 'location=yes'); 
     }; 


     $scope.openSocialSharing = function() 
     { 
      window.plugins.socialsharing.share('Message,image and link', null, 'https://www.google.com/images/srpr/logo4w.png', 'http://www.google.com'); 

      }; 

     $scope.deliberatelyTrustDangerousSnippet = function() 
     { 
      return $sce.trustAsHtml($scope.snippet); 
     }; 
    } 
    }); 

Answer 1

• демо:http://so.devilmaycode.it/how-to-put-a-map-infowindow-using-html-and-angularjs

<div id="main-content"> 
    <div ng-controller="EventSimpleCtrl"> 
     <map zoom="4" center="-25.363882, 131.044922"> 
      <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker> 
     </map> 
    </div> 
</div> 
<script> 
var app = angular.module('myapp', ['ngMap']); 
app.controller('EventSimpleCtrl', ['$scope', '$timeout', function($scope, $timeout) { 
    var marker, map; 
    $scope.$on('mapInitialized', function(evt, evtMap) { 
     map = evtMap; 
     marker = map.markers[0]; 
     // this one is if you want to keep an hardcoded <info-window> 
     // var infoWindow = map.infoWindows[0]; 
    }); 
    $scope.click = function(event) { 
     var infoWindow = new google.maps.InfoWindow(); 
     infoWindow.setContent('Testing'); 
     infoWindow.open(map, marker); 
    } 
}]); 
</script> 

Примечание:

я предполагаю, что вы используете эту библиотеку http://ngmap.github.io, так, из DOCs это сказать, что вы можете иметь info-windows двумя способами, один должен поместить тег прямо в <map> тегов, как это:

<info-window id="foo" position="current-location" visible="true"> Some Text Here </info-window> 

и доступ к нему, как это

... 
function($scope, $timeout) { 
     var marker, map, infoWindow; 
     $scope.$on('mapInitialized', function(evt, evtMap) { 
      map = evtMap; 
      marker = map.markers[0]; 
      // get the info-window by it's id foo 
      infoWindow = map.infoWindows['foo']; 
     }); 
     ... 

после того, как вы получили его, вы можете использовать его, как вы будете делать с нормальной GMAP API V3

• Любые InfoWindow options

• Любой InfoWindow events

Answer 2

В jsfiddle показывает Google карты и маркеры и по щелчку маркеров он покажет InfoWindow:

<div ng-app="mapsApp" ng-controller="MapCtrl"> 
    <div id="map"></div> 
    <div id="class" ng-repeat="marker in markers | orderBy : 'title'"> 
     <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a> 
    </div> 
</div> 

http://jsfiddle.net/pc7Uu/854/