title: How to pass Longitude and Latitude to google map direcive in angularjs
body: <p>I am working on AngularJS. I am trying to display a Google Map, based on selected Longitude and Latitude. so i have followed the following steps,</p>
  
  <p>1, Included Google Map Script </p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>2, Written an angularJS directive for Google Map</p>
  
  <pre><code>.directive('map', function() {
      return {
          restrict: 'E',
          replace: true,
          template: '&lt;div&gt;&lt;/div&gt;',
          link: function(scope, element, attrs) {
              var markersArray = [];
              var myOptions = {
                  zoom: 14,
                  center: new google.maps.LatLng(attrs.glat,attrs.glang),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              var map = new google.maps.Map(document.getElementById(attrs.id), myOptions);
  
              google.maps.event.addListener(map, 'click', function(e) {
                  scope.$apply(function() {
                      addMarker({
                      lat: e.latLng.lat(),
                      lng: e.latLng.lng()
                    }); 
  
                      console.log(e);
                  });
  
              }); // end click listener
  
              addMarker= function(pos){
              for (var i = 0; i &lt; markersArray.length; i++ ) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
                 //map.clearOverlays();
                  //alert(pos.lat);alert(pos.lng);
                 var myLatlng = new google.maps.LatLng(pos.lat,pos.lng);
                 marker = new google.maps.Marker({
                      position: myLatlng, 
                      map: map,
                      title:"Hello World!"
                  });
                  scope.pinLatLang={"lat":pos.lat,"lang":pos.lng};
                  scope.$apply();
                  markersArray.push(marker);
  google.maps.event.addListener(marker,"click",function(){});
              } //end addMarker
          }
      };
  })
  </code></pre>
  
  <p>3, Written following markup,</p>
  
  <pre><code>&lt;map id="map_canvas" glat="33.6408" glang="-84.4457" class="col-md-10"&gt;&lt;/map&gt;
  </code></pre>
  
  <p>when i did like above it works fine. But in my scenario i need to call a web service and get longitude and latitude like,</p>
  
  <pre><code> $http({
                      method: 'GET',
                      url: "myUrl" + $routeParams.param1,
  
                  }).success(function (data, status, headers, config) {
                    //Here i will set scope variables
      $scope.GLongitude=data.Longitude;
      $scope.GLatitude=data.Latitude;
      });
  </code></pre>
  
  <p>and using those scope variables in my directive element markup like</p>
  
  <pre><code> &lt;map id="map_canvas" glat="{{GLongitude}}" glang="{{GLatitude}}" class="col-md-10"&gt;&lt;/map&gt;
  </code></pre>
  
  <p>but it is not loading map, i think scope variables not yet gets initialized when directive create markup. How can i achieve this. Please Guide me.</p>