Search code examples
javascriptjsonangularjsgoogle-mapsangularjs-google-maps

How i pass latlon based on id in angular js google map


I am new in angular js. I am trying to pass my json lat lon based on id in to google api. My json file structure.

{
 "totalCount":206,
  "deals":[{
       "id":"2",
       "Name":"samir",
       "locations":[{
         "location":"Mundhwa Gaon",
         "address":"Mundhwa Gaon, North Main Road, Pune - 411 001",
          "latLon":"18.53918870,73.90790910"
          },
          "location":"Mundhwa Gaon",
          "address":"Mundhwa Gaon, North Main Road, Pune - 411 001",
          "latLon":"18.53918870,73.90790910"
          },
        ]
      },
      "id":"3",
       "Name":"samir",
       "locations":[{
         "location":"Mundhwa Gaon",
         "address":"Mundhwa Gaon, North Main Road, Pune - 411 001",
          "latLon":"18.53918870,73.90790910"
          },
          "location":"Mundhwa Gaon",
          "address":"Mundhwa Gaon, North Main Road, Pune - 411 001",
          "latLon":"18.53918870,73.90790910"
          },
        ] 
   }]
}

My angular js code

$http({method: 'GET', url: '/api/v1/asas}).success(function(data) {             
            $scope.deal = data.deals;               


if(data.deals[0].hasOwnProperty("locations") && data.deals[0].locations!=null){                         
                var location=$scope.deal[0].locations[0]['latLon'];
                var locationlatlong=location.split(",");
                $scope.map = {center: {latitude: locationlatlong[0], longitude: locationlatlong[1] }, zoom: 4 }
                $scope.options = {scrollwheel: false};
                var markers = [];
                for (var i = 0; i < $scope.deal[0].locations.length; i++) {
                    markers.push(createmarker(i, $scope.deal[0].locations[i]['location'], $scope.deal[0].locations[i]['latLon'],$scope.deal[0].locations[i]['address']))
                }
                $scope.markers = markers;
                if(badBrowser){
                    $scope.rendermap=false; 

                }else{                      
                    $scope.rendermap=true;      

                }
            }                       


        });

Now it only pass 1st deals id location. I try to make when some click on one deal then it pass that deals id locations(lat long). I am using angular js 1.2.23


Solution

  • Fixed this problem .My code

    $scope.mapcall = function (deals) { 
            $scope.rendermap=false; 
            $scope.rendermapbtn=false;              
            if(deals.locations!=null){                  
                $scope.rendermapbtn=true;                                   
                var location=deals.locations[0]['latLon'];
                var locationlatlong=location.split(",");
                $scope.map = {center: {latitude: locationlatlong[0], longitude: locationlatlong[1] }, zoom: 4 }
                $scope.options = {scrollwheel: false};
                var markers = [];
                for (var i = 0; i < deals.locations.length; i++) {
                    markers.push(createmarker(i, deals.locations[i]['location'], deals.locations[i]['latLon'],deals.locations[i]['address']))
                }
                $scope.markers = markers;
                if(badBrowser){
                    $scope.rendermapbtn=false;
    
                }else{                      
                    $scope.rendermapbtn=true;   
    
                }
            }       
        };