<?php
    foreach ($query->result() as $row)
    {
        $lat = $row->geo_lat;
        $lng = $row->geo_lng;
        $pic = $row->picture;
        echo $lat;
        echo $lng;
        echo "<img src="" . base_url() . $pic . ""/><br />";
        //echo json_encode($row);
        //echo "<pre>";
        //echo print_r($row);
    }
?>

var locations = ?????????;
var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][0], locations[i][1]),
      map: map,
      draggable: true
    });
  }

<?php
    echo( "<script>" );
    echo( "  var locations = " + json_encode($query->result()) + ";" );
    echo( "</script>" );
?>

<script>
    var js_obj=<?php echo  json_encode($result); ?>
  /* now you can access this json object that is in js_obj variable and acccess any thing you want using dot operator.*/
</script>